Photoshop 


Create stunning web graphics every 
time with this no-nonsense guide to od 
getting images ready for the internet = 


132 pages of easy-to-follow tutorials and expert advice 
to help you develop your Photoshop skills 


ee a 


Adobe Photoshop for the Web 


Bring those images to life! 


Whether you want to design a whole website, or just create animations 
that explode on to the web, this guide has everything you need! 


Peis Photoshop is an incredibly powerful and versatile program 
that’s packed with tools and features to bring out the creative genius 
in beginners and image-editing experts alike. In this issue we take a look 
at how Photoshop is interwoven with ImageReady, enabling you to create 
stunning animations for the web with ease. From covering the basics of 
animation in a series of simple steps and tutorials to more in-depth coverage 
of complex animation projects, you’ll learn everything you need to enable 
you to bring your images to life. 

You don’t need to be an experienced animator to get things moving with 
Photoshop and ImageReady. We’Il start with the basics, showing you how 
to make a ball bounce realistically on the screen, and take you all the way 
through to creating sophisticated web page designs that feature multiple 
animated elements. You'll have plenty of fun along the way — we’ll show 
you how to make your car ‘smile’ and even how to make your pet dance! 
Entertaining and educational — what more could you want? 

If you’re more commercially minded, and looking to use animation 
to promote your online store, or looking for some clever ways to 
enhance your business’s website, then the advice and tips in this issue 
will be invaluable to you — banners, signs and logos 
can all be animated and enlivened using Photoshop’s 
and ImageReady’s tools. 

From creating images to send to mobile 
phones to editing and creating your own 
home movies, the ways in which you can 
use your animations is endless. Our 
walkthroughs will guide you through every 
step of the featured projects, and you'll 
even find training movies on the CD to 
show you exactly how things should be done. : 

So what are you waiting for? Turn the page and start learning how you 
can bring your images to life in new and exciting ways. From wacky 
websites to dancing dogs — everything you need is here... 


Avose PHoTosHor For THE wes — Focus Guine | 3 


4 


a 


Future 


Future Publishing Ltd 
30 Monmouth Street, Bath BA1 2BW 
www.futurenet.co.uk 
Tel 01225442244 Fax01225 446019 
Writer George Cairns 
Editor Tamsin Mackay 


Richard Llewellyn 
Front cover © Getty Images UK 
Production Editor Mike McNally 
Computer Arts Senior Editor Paul Newman 
Video Tutorial Producer George Cairns 
New Media Co-ordinator Trevor Witt 
New Media Editor Simon Holland 
Production Co-ordinator Diane Ross 
Marketing Manager Fiona Tully 
Publisher Kelley Corten 
Publishing Director Dom Beaven 


www.myfavouritemagazines.co.uk 


Distributed through the UK Newstrade by 
Marketforce (UK) Ltd, 5th Floor, Low Rise Building, 
Kings Reach Tower, Stamford Street, London, SE1 9LS 
Overseas Distribution by Future Publishing Ltd. 


SUBSCRIPTIONS & BACK ISSUES 
Ifyou have a query regarding a subscription or back issue, or would like 
to place an order, please contact our customer services team: 
Telephone: +44 (0)870 837 4722 
Email; customerservice@futurenet.co.uk 


Printed in the EU 


All contents © 2006 Future Publishing Ltd 


All rights reserved. No part of this publication may be reproduced, stored in a retrieval 
system, or transmitted in any form o by any means without the prior permission of 
the publisher. 

Websites mentioned in this publication are not under our control. We are not 
responsible for the contents of these sites or any changes or updates to them. 

None of the information in this guide is intended as legal advice. The articles are for 
information purposes only. 


Future Publishing is part of Future plc. 
Future plc produces carefully targeted specialist magazines for people who share a 
passion. We aim to satisfy that passion by creating titles offering value for money, 
reliable information, smart buying advice and which are a pleasure to read. Today we 
Publish more than 100 magazines in the UK, US, France and Italy. Over 100 
international editions of our magazines are also published in 30 other countries 
across the world, Future pic is a public company quoted on the London Stock 
Exchange (symbol: FUTR) 


Non-executive Chairman Roger Parry 


Chief Executive Greg ingham 


Managing Director Robert Price 
Group Finance Director John Bowman 
Tel +44 1225 442244 wwwfutureplccom 


Bath + London + Milan + New York + Paris + San Francisco 


Focus Guipe ~— Apose PHotosiop roa THE We 


We recommend that you always maintain an 
up-to-date backup of your hard disk data. 

Future Publishing does not accept any responsibility 
for disruption, damage and/or loss to your data or 
computer system that may occur while carrying out 
procedures described in this publication. 


Icons explained 


Finding your way 


Our handy icons hold the key to a wealth of additional 
information both in the Focus Guide and on the disc... 


\ N ] here do you start? With so 
much to tell you about 
Adobe Photoshop and ImageReady, 
it’s hard to find enough room for all 
of the information we want to pack 

in — especially since there’s now a 
second Focus Guide included on the 
cover disc! That’s why you’ll find 
the special icons that accupy the 
margins on each page so useful. 

As you leaf through the pages, 
you'll find a range of eye-catching 
symbols to help you to identify 
exactly what kind of information 


On your DVD-ROM 


you're dealing with — for a guide 

to icon categories, see below. These 
hints and tips are always relevant 
to the topic that’s being discussed, 
and will help you to develop your 
Photoshop and ImageReady skills 
that little bit faster. 

Our writers are all experienced 
Photoshop experts who regularly 
contribute to our sister publications, 
such as Computer Arts, so you can 
rest assured that all the information 
included in this Focus Guide is 
thoroughly tried and tested. 


Take note 


Tutorial files, trial software, PDFs of our issue 16 Modern 
Art and more besides are included on your DVD-ROM. 
Every now and then, we remind you of this by flagging- 
up the disc icon and listing the relevant disc contents 
for that page or chapter. 


Top tips 

This indicates an expert tip. Anything sheltered beneath 
this icon is guaranteed to reveal a useful tip, or advice 
about Adobe Photoshop Elements’ range of tools, 
options and features. 


Further information 

Weld like to tell you absolutely everything, but there's 
just not enough space. Instead, we refer you to other 
useful resources — such as websites and specialist books 
- for further reading. 


Shortcuts 

Carrying out common tasks again and again can get a 
little tedious. Our handy shortcuts show you how to 
perform these tasks with a few deft key-presses, saving 
you lots of time and effort. 


G%S% 


N 


You'll find a number of these nuggets of knowledge 
scattered throughout this Focus Guide. They're 
crammed with useful information that complements 
the points being made in the main text perfectly. 


Watch out! 

The ‘skull and crossbones’ sign means that you should 
proceed with caution. You'll find some important 
points outlined below this icon, which you should 
certainly take seriously. 


Links 

When we refer to a website, we may pull out the web 
address in the sidebar to make it easier for you to read 
and remember. 


Photoshop version 

Where there are anomalies in the way that heritage or 
Elements iterations of the software handle particular 
tasks, or if certain tools are located in different places in 
the interface, this icon will alert you. 
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In this chapter... 


Oo Analyse the components 
of an animation 


Ocet to know the 
Animation palette 


Obiscover the Layers 
palette’s animatable 
attributes 


Ocreatea simple 
animated GIF 


ANIMATION 
TOOLS AND 
INTERFACES 


The powerful combination of Photoshop 
and ImageReady enables you to create 
eye-catching animations that will enhance 
your websites, and add polish to video 


P hotoshop is a powerful and 
versatile package that can be 
used in all kinds of different ways. 
Photographers can employ the 
application’s extensive image 
adjustment tools to tweak histograms 
to get a perfect range of shadows, 
midtones and highlights in their 
digital shots; image re-touchers 
can give reality a nip and a tuck by 
Temoving unwanted objects from a 
scene using tools such as the Clone 
Stamp, or by performing a bit of 
digital cosmetic enhancement — to 
remove a subject’s blemishes and 
whiten their teeth, for example. 

Of course, Photoshop can do much 
more than enhance images, as we 


can see from the work of reality- 
warping digital artists who use the 
package in more creative ways. 
Many of these users will be 
aware of ImageReady, Photoshop’s 
specialist web content tool, but will 
have spent little, if any, time getting 
to know what the application can 
actually do. After all, Photoshop CS 
and CS2 have plenty of Save for 
Web options, so why should they 
bother using ImageReady at all? 


Still and moving 

In this Focus Guide we’ll give you a 
whole host of reasons to get better 
acquainted with ImageReady, as we 
show you how to unleash your 


Page 12 Take an animated GIF to 
bits to see how it was put together 


omne , 


Page 15 Take a close-up look at 
ImageReady’s Animation palette 


Page 16 ImageReady’s Layers palette 
can help you to create animated GIFs 


| 
oe 
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Layers palettes to create an animation 


creativity — and take your static 
Photoshop imagery to a whole new 
level — by creating animations. 
Back in Photoshop Focus Guide 
issue 10 we looked at creating web 
imagery using Photoshop and 
ImageReady. Although primarily 
concerned with still images, that 
guide also touched on the subject 
of using ImageReady to create 
animations with which to liven up 
your websites, and in this issue we're 
going to focus in much more detail 
on creating animated content for the 
web. To give you added value for 
money — and an extra resource — 
we’ve placed the whole of issue 10 
on the cover disc in PDF form, so 


Page 17 Combine the Animationand _ Page 18 Modify an animation to 
fine-tune its components and its timing 


you can refer to it for more on using 
ImageReady with still images. 


Ideas and interaction 

In this guide we’ll show you how to 
combine Photoshop and ImageReady 
to create striking and imaginative 
animated graphics for the web. As 
well as eye-catching animated GIFs 
to attract passing surfers, we’ll also 
show you how to make a site more 
interactive by creating animated 
rollovers that react to being clicked 
on. We’ll even show you how to 
embed multiple animations into a 
single web page’s design, so each 
animation can be triggered by the 
presence of a visitor’s cursor. 
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Page 19 Learn how various Layers 
palette attributes can be animated 
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Anatomy of a GIF 


PodcastGIF 

To see the animated GIF 
featured on this page (or 
any of the GIFs created or 
referred to in this guide) 
check out Podcast.GIF on 
your cover disc. Simply drag 
the GIF on to your browser's 
icon to see the animation 

in action (or choose File > 
Open from within your 
browser, and navigate to 
the GIF file). 


Before we create our own animated GIF, let’s 
take one apart to see what makes it tick... 


E very moving image we watch 
is made up ofa series of still 


images — because these static images 


flicker by so quickly we perceive 
them to be moving. TV broadcasts 


use sophisticated techniques to make 


this movement appear smoother, like 
packing 25 frames (each containing 
two separate fields) into every 
second of screen time. Fortunately 
for animators, a small amount of 
frames are enough to create the 
illusion of movement. We can bring 
matchstick figures drawn on page 
corners to life by flicking rapidly 


FRAME BY FRAME 


ImageReady and Photoshop enable you to 
create a GIF’s components from scratch, and 
animate them using a variety of techniques 
through the pages of a book, for 
example, and ImageReady’s animated 
GIFs work in much the same way. 


Discover how the frames of a GIF create the illusion of movement 


On page 57 we'll show you how to create an animated iPod 


icon to promote a link to your podcasts. The iPod graphic 


was created using Photoshop's vector-based shape tools, 


and given a 3D effect using layer styles. A stylised blue radio 


wave radiates outwards from the iPod's scroll wheel before 


fading out into thin air, like a radio wave. The GIF is made 


up of just eight frames, but as it’s set to loop forever it 


provides plenty of movement, while maintaining a small 


file size. Throughout this guide we'll show you many tricks 


and techniques for transforming layered components into 


sequential frames to produce an animation. 
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ImageReady’s animated GIFs create 
the illusion of movement by rapidly 
displaying a series of still frames 


Getting started 


The production pipeline 


Let’s look at the relationship and workflow 
between Photoshop and ImageReady 


Y ou may be an experienced 
Photoshop user who’s 
interested in developing your web 
skills but has little knowledge of web 
design packages such as GoLive, or 
web content creation packages like 
Flash. This guide will demonstrate 
how you can create some amazing 
animations without the need to go 
under the bonnet and tinker with any 
HTML. Indeed, you don’t need to 
stray far from the comfort zone of 
the Photoshop interface. 

Thanks to the integrated workflow 
between Photoshop and ImageReady 


To AND FRO 


you can easily create complex web 
graphics from scratch that feature a 
combination of animated GIFs and 
JPEGs nestled together in tables, 
without any java coding or HTML 
knowledge. Photoshop enables you 
to create the components for your 
animated GIFs either from scratch, 
or by editing existing source photos 
(see the dancing dog in Chapter 5 


for an example of animating photos). 


On the following pages we’ll 
introduce you to the key tools that 
ImageReady provides to get your 
Photoshop content moving. 


Quick switch 

To jump between 
ImageReady and Photoshop 
without clicking on the 
appropriate toolbox icons, 
simply press [Shift]+ 
[Control]/[Command]+ [M]. 
You can then tweak your 
source files in Photoshop, 
press the shortcut again and 
update the changes to the 
animation in ImageReady. 


Jump between Photoshop and ImageReady to edit and animate 


One great thing about ImageReady is the similarity of 

its interface to Photoshop's. Once you've created a few 
components on separate layers in Photoshop, simply click 
on the Edit in ImageReady icon at the bottom of the toolbox 
to open your document in ImageReady. ImageReady 
displays the Photoshop components in its own Layers 
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palette, and like Photoshop it has tools that you can use to 
generate content such as text, or vector-filled shapes. At the 


bottom of the ImageReady toolbox is an Edit in Photoshop 
Jump between ImageReady and 
Photoshop by clicking the icons 

at the bottom of their toolboxes 


icon, and you can jump back and forth between the 
applications to modify or create content at any time. 
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Chapter 1 


The ImageReady interface 


Tidy up the interface 
When you first open 
ImageReady the interface 
will be clogged with palettes 
in their default locations. 
Although we'll be using the 
Web Content palette later, 
you won't need it for a while, 
so click on the close icon to 
get rid of it. Turn off all the 
open palettes except the 
Layers palette, then go to 
Window > Animation to 
open the Animation palette; 
these palettes are the key 
tools of the animation trade. 


Learn to recognise ImageReady’'s animation 
tools and palettes — you'll be using them a lot! 


i” s you progress through this 
guide you’ll be spending a 
lot of time in the ImageReady 
workspace, and you’ll soon get to 
know your way around its various 
tools and palettes. Over the next 
few pages we’ll introduce you to 
the program’s key features, and 
we’ll demonstrate the important 
relationship between the Animation 
palette and the Layers palette. 
We'll also introduce you to some 
of the techniques that you’ll put 
into practice in the many creative 


walkthroughs throughout this guide. 


Some KEY IMAGEREADY TOOLS 


By following these walkthroughs 
step by step you'll discover a variety 
of different ways to create animated 
content, and be able to adapt the 
techniques they cover to create your 
own site-enhancing animations. 
You'll learn what attributes of a 
Photoshop document ImageReady 
can animate — such as layer visibility 
and opacity for example, as well as 
discovering effective ways to get 
around ImageReady’s limitations. 
But let’s kick off with a general look 
at the most commonly used areas of 
ImageReady’s interface. 


and edit components 


of Frame 4. 
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ImageReady’s toolbox is 
like a cut-down version of 
Photoshop’s; you can use the 
tools to generate content, 


imported from Photoshop. 


The work area is where 
you can view (and edit) the 
content of a specific frame; 
here we can see the content 


DSH 
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The Layers palette 
contains all the components 
of your animation. We'll show 
you how to change a variety 
of different layer attributes 

to create movement. 


As you'd expect, the 
Animation palette is one 
of the most important tools. 
It enables you to decide what 
each frame of the animation 
will display. 


Getting started 


The Animation palette 


Take a look at the Animation palette, and 
familiarise yourself with its icons and controls 


B efore any craftsman gets 
down to work they’ll make 
sure they’ve got the right tools for 
the job, and make sure they know 
where to find them. It’s no different 
when you're creating animations 

in ImageReady, so before you get 
started you’ll find it useful to know 
the location and identity of the many 
icons and buttons that you’ll be 
using in the walkthroughs featured 
throughout this Focus Guide. Let’s 
start by checking out the Animation 
palette in more detail, as it’s loaded 
with features for altering attributes 


THE ANIMATION PALETTE 


such as the duration of frames, and 


whether the animation plays once 
or loops continuously. The 
Animation palette also contains 
fantastic timesaving tools like the 
tween icon, which enables you to 
generate dozens of frames in an 
instant to get a layer’s component 
moving from point A to point B. 


We'll be putting all of the Animation 
palette’s features through their paces 


as we progress, so feel free to use 


Workspaces 

Once you've tailored the 
ImageReady workspace to 
suit your animation needs, 
you can save the layout as 
an alternative to the more 
cluttered default workspace. 
Go to Window > Workspace 
> Save Workspace. In the 
Save Workspace dialog box 
that appears type ina 
suitable name - for example 
Animation Workspace. 


this page as a handy ‘map’ that will 


help you to quickly locate specific 


Animation palette icons. 


ie Each frame in the 
animation is viewed asa 


numbered thumbnail, and 
represents the state of the 
Layer palette’s components 
at a specific time. 


i 


This drop-down menu 
enables you to set the 
animation’s looping options. 
You can create infinitely 
looping animations, or just 
make the GIF play once. 


bi These generic playback 


controls enable you to play 
the animation to test it, or 
step through the frames one 
by one, as well as rewinding 


to the start. 


Avore PHoto 


Click under each frame to @ 


Click on this arrow to open we 


the palette menu, which 
gives you access toa host 
of additional animation 
commands and options. 


change its duration. You can 
[Shift]+click to select a range 
of frames, and change their 
durations in one go. 


The tween icon accesses 
one of the most powerful 
features in the Animation 
palette - more on that later. 
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Chapter 1 


The Layers palette 


Rotating radar 

On pages 62-65 we'll show 
you how to combine the 
Animation palette and the 
Layers palette to create an 
animated radar beam. The 
sweeping beam effect is 
achieved by creating a grey 
layer which is one quarter 
filled with white. The layer is 
duplicated, and each copy 
Is rotated in increments to 
create several more layers. 
These layers are then turned 
on and off in sequence to 
create several new frames 
in the Animation palette. 


Control each frame of your animation by 
modifying attributes in the Layers palette 


C ell-based animation is a 
traditional technique that does 
away with the need to redraw every 
element in every frame. By drawing 
a moving character’s frames on to 
hundreds of transparent sheets (or 
cells), the animator can then overlay 
each cell on to a detailed picture of 
a static background. They can then 
capture a frame of the finished 
animation, and swap to the next cell 
in the sequence. The background 
doesn’t have to be re-drawn each 
time, as it’s visible through the 
transparent parts of each cell. 


THE LAYERS PALETTE 
ay fag Sl 


ee The Layers palette’s 


blending mode options 
enable the white parts of 
each radar beam layer to 
burn out the details of the 
static background layer. 


In Frame 7 of the 
Animation palette we can 
see that specific layers in the 
Layers palette have become 
visible, while others have 
become hidden. 


rea Click here to step forwards 


or backwards through each 
frame of the animation. You 
can modify a layer’s visibility, 
or the position of its content, 


The Layers palette is one of the 
most useful and powerful tools in 
Photoshop and ImageReady, as it 
allows you to have total creative 
control over the content and position 
of a project’s components. In many 
ways it mimics the traditional cell 
animation technique: you can create 
a background layer, then add new 
layers to contain the objects or 
characters that you want to move. 
The Layers and Animation palettes 
work very closely together to create 
your finished movies, as you’ll see 
in the following chapters. 


A layer’s visibility is Cae 


controlled by clicking on 
the eye icon. Hiding and 
showing different layers in 
different frames creates the 
illusion of movement. 


These duplicated and Re 


rotated layers turn on and 
off in sequence, creating the 
animated radar beam effect. 


The static background ba 


texture remains visible in 
every frame of the animation, 
like the background drawing 


to alter the animation. | 
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of a cell-based animation. 


Getting started 


Make it move 


Combine the Layers palette and the Animation 
palette to create a simple animation 


DasAES NS 
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ft] Here's a simple exercise to show you 
the basics of creating an animation. 
Open Photoshop and Go to File > New. 
Choose a Preset of 800x600. Select the 
Horizontal Type Tool [T], and click in the 
work area. Type the numbers 1 to 10 on 
separate layers. Move all the numbers so 
that they overlap. The file will look quite 
cluttered at this stage. 


lick the Edit in ImageReady icon at the 
foot of the Toolbox, and in ImageReady 
open the Animation palette. Frame 1 will 
show the visible contents of the Layers 
palette. Initially it will show the overlapping 
numbers from each layer. Make all the 
number layers invisible, apart from number 
1, by clicking the eye icon by each layer. Now 
only number 1 will be visible in Frame 1. 


fs] Click the Duplicate current frame icon 

~_| at the bottom of the Animation palette 
(the icon just to the left of the trashcan 
symbol). This will create Frame 2 of your 
animation. Now pop up to the Layers 
palette, hide the number 1 layer and make 
the number 2 layer visible. Now Frame 2 will 
display the visible number 2 layer. 


Click the Duplicate current frame icon 

again to create Frame 3. Hide layer 2 in 
the layers palette, and show layer 3, which 
contains the number 3. Repeat this process 
to create 10 frames displaying the numbers 
1 to 10 in order. Now click the Play button, 
and the numbers will animate from 1 to 10 
- you've created your first animation using 
Photoshop and ImageReady! 
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Typing text 

To make each number 
appear on a separate layer, 
type a number, then click on 
another tool in the toolbox 
(such as the Move Tool) to 
temporarily deactivate the 
Horizontal Type Tool. When 
you reselect the Type Tool 
the next number you add 
will automatically appear in 
anew layer of its own. Don't 
place anew number too 
close to the previous one, 
incase you add it to the 
previous layer. To move the 
numbers, use the Move Tool. 


Examine the 
animation 

Once you've created your 
animation and played it 
back in Step 4, take a close 
look at the relationship 
between the Animation 
palette and the Layers 
palette. Stop the animation 
playing, then click on the 
‘Select next frame’ icon 

at the bottom of the 
Animation palette, and as 
you step through each 
frame look in the Layers 
palette: you'll see the 
appropriate layer become 
visible, and the previous one 
disappear, as you advance 
through the frames. 
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Chapter 1 


Modifying your animation 


Having created your animation, you can now 
fine-tune its look and timing in various ways 


When you play your animation the 
numbers change rapidly. To slow them 
down, [Shift]+click Frame 1 in the Animation 
palette, then [Shift]+click Frame 10 to select 
all the frames. Go to the Select frame delay 
time option at the bottom of Frame 1, and 
set it to 1.0 sec. This will change the delay 
time for all of the frames. Now the numbers 
will each appear for one second. 


Perfect preview 

To see a preview of your first 
animated GIF, click on the 
‘Preview in ieexplorer' icon 
in the ImageReady toolbox; 
Mac users have a Preview 

in Safari icon that does the 
same job, You can also go 

to File > Preview and select 
another browser. Previewing 
the icon in a browser is a 
useful thing to do; as well as 
seeing the animation as it 
will look online, you can also 


The animation will be more effective if 
the numbers count down from 10 to 1. 
To create this effect [Shift]+click again to 
select the ten frames in the Animation 
palette. Click to open the palette menu, 


4 
5) 
iH 


poe eae ie a and choose Reverse Frames from the list of 
inatarodndamemcaet ey options. Frame 1 will now display number 
10 on layer 10, and the animation will count 
backwards from 10 to 1. 
You can also change the layer content 
itself to make your animation look 
Using colour more interesting. The vector text is still 
To.add more interest to editable, so click on a layer thumbnail. 
Pet oe ria Go to the options bar and change the colour 
numbers as they count of the text using the ‘Set the text color’ 


down from 10 to 1. Use the 
‘Set the text color’ option 
to turn layers 5 to 2 orange, 
then make the number 1 
on layer 1 a dramatic red. 
Adding more colour means 
the GIF has to include more 
information, but in our 
example this will push the 


option. Edit > Fill the Background layer with 
black to make the colour stand out. 


If you want to create a small GIF you 

don’t need all of the black background. 
J Select the Crop Tool [C], and draw a box 

Hie bp bylessihan a around the number 10 (the largest number) 

lobyte. For more tips on ry 

optimising images, check es ee erties te Dewey to crop the file down. You can now go to 

out page 117 of Focus Guide i File > Save Optimized As. Name the file 

10, which you'll find on the Countdown, and select Images Only (*GIF) 

covendisa from the Format options. You can now add 

the GIF to a web page as you would a JPEG. 
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Getting started 


Animatable attributes 


ImageReady can animate other Layers 
palette attributes in addition to visibility 


\ \ e created our animated 
countdown clock by toggling 
the visibility of specific layers in 
specific frames. This is a great way 
of showing separate images in a 
specific order to create the illusion 
of movement, and is similar to the 
traditional cell animation technique. 
ImageReady can do more than just 
record the visibility of a layer’s 
components at a specific frame, and 
as you progress through this guide 
you’ll learn how to take advantage 
of a host of animatable attributes to 
create different types of animation. 


In the next chapter you'll use tweening to 
animate the position of a layer’s content 
and create multiple frames of animation 


that ImageReady can animate. 


A\NIMATABLE LAYERS PALETTE ATTRIBUTES 


_| VISIBILITY As you've seen, you can use the Animation palette to record 
changes in the visibility of specific layers at specific frames. This enables 
you to change the content of each frame by modifying the visibility of 
layers in the Layers palette. 


PosITION You can make an object move across the work area by 
changing the position of a layer’s content. Thanks to tweening you can 
use two key frames to make an object move smoothly from one part of 


the screen to the other without having to draw the intermediate frames. 


We'll look at tweening in the next chapter. 


| OPAcITY You can make objects fade in and out by altering their layer’s 
opacity, or by making them dissolve into a blank frame using tweening. 


(_] LAYER STYLES You can animate layer styles to achieve all sorts of effects, 


like the rotating metallic reflection inside the shiny logo on page 41. 


Aoose PHOTK 


Check out the box below to see some 
of the other Layers palette attributes 


Constraints 

As you work through this 
guide you'll see creative 
walkthroughs that use all 

of the Layers palette’s 
animatable attributes. You'll 
also discover some of the 
constraints involved in 
creating animations using 
the Layers palette, such as 
when trying to rotatean 
object. We'll show you tricks 
and techniques to help you 
overcome these constraints, 
to enable you to create more 
advanced animations. 


See the movie... 

Some of the creative 
walkthroughs that you'll 
encounter in this guide are 
accompanied by a movie 
on the cover disc. These 
training movies will talk you 
through the walkthrough 
step by step, and show you 
how to put animation 
theory into practice. 
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GETTING: THE 
BALL BOUNCING: 
TE BASICS 


Following this traditional ‘bouncing ball’ 
animation exercise will help you to understand 
the process of creating assets in Photoshop, 
and then making them move in ImageReady 


T he best way to understand how 
ImageReady enables you to 
turn static Photoshop layers into 
all-singing, all-dancing animations 
is to create a simple shape in 
Photoshop, and make it move using 
ImageReady’s Animation palette. 
For decades trainee animators have 
taken their first steps into the magic 
world of creating movement from 
static images by animating a 
bouncing ball. This simple exercise 
provides a perfect introduction to 
animating in any medium, as the 
source material is simple to produce 
and animate. Animators who draw 
by hand can quickly sketch a ball 
on separate pages of a flick-book to 


show it falling, hitting the ground, 
deforming to give it a sense of mass 
and then regaining its shape as it 
springs back into the air. 


Tweening 

3D modellers using packages such 
as Maya will also often start with the 
bouncing ball animation, because 
all 3D applications can create a 
sphere at the click of a mouse. 

To move the ball from the air to 

the ground they start by setting key 
frames. The first key frame shows 
the ball in its starting position in the 
air, and the second key frame shows 
the ball hitting the ground. The 3D 
package’s tweening feature fills the 


Simple animation 


Page 22 Create the assets for your 
project using Photoshop's tools 


Page 24 Create key frames to define 
your object's start and end points 


Page 24 Make the ball move by using 
tweening to create intermediate frames 


Page 28 Add character to the ball by 
making it deform on impact 


gaps between the start and end 
positions, saving animators the chore 
of drawing all the intermediate 
frames that make up the sequence. 
Tweening enables them to bash out 
an animated movie in seconds, as 
they only have to manually position 
the ball for two frames, whereas the 
flick-book artist has to draw all the 
intermediate frames to make the ball 
fall from the air to the ground. 
ImageReady works in a similar 
way to 3D applications, and web 
animation packages like Flash, in 
that it also enables you to tween 
between key frames. In this chapter 
we’ll show you how to create a 
bouncing ball by defining a start 


Page 30 Change the looping options 
to alter the behaviour of your animation 


Page 35 Optimise your animation 
to make it easier to download 


point and an end point, and the 
software will fill in the intermediate 
frames automatically to create an 
animation that shows the ball falling. 


Adding character 

3D modellers will make their ball 
appear to compress on impact by 
using deform tools to squash their 
sphere, and we’ll use Photoshop’s 
Transform options to do the same job. 
As you work through this chapter’s 
simple exercises you'll begin to see 
how Photoshop and ImageReady 
work as a team, enabling you to 
jump back and forth between the 
packages to modify your animation, 
or to create new content. 
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Chapter 2 


Creating the content 


Ball.psd 

By creating your own ball 
you'll see how easy it is to 
produce source material 
for your animations from 
scratch using Photoshop's 
tools. However, ifyou want 
to save time you can find 
the ball source file that we 
use in this chapter on the 
disc, so you can get straight 
onwith the business of 
animating it. 


GET THE BALL ROLLING 


We'll create the source material we need for 
our bouncing ball animation in Photoshop 


O ne of the reasons why novice 
animators use this exercise 

is that the assets are easy to create. 
Open Photoshop, and create a new 
file by going to File > New. Create 

a file that’s 624x424 pixels in size, 
and give it a resolution of 144 pixels. 
This is a larger resolution than your 
typical animated GIF requires, but at 
this stage in the production process 
it’s easier to create the assets at a 
higher resolution, and shrink them 
down later; you don’t want to strain 
your eyes working at a fiddly 72dpi. 
Check out the annotated screenshot 


We can create a ball with a shiny texture and 
3D look using Photoshop's Brush, Marquee and 
Gradient tools, and the Free Transform options 
below to see how to create the 
simple ball that we’re going to 
animate over the next few pages. 


Use the Elliptical Marquee 
Tool [M] to draw the body of 
the ball. Hold down [Shift] 
to make the tool drawa 
perfect circle. 


On a separate layer use 
the Brush Tool to spraya 
specular highlight, to add 
to the 3D effect. 


We've created our source 
file using separate layers. 
You'll see the advantage of 
using layers later, when we 
rotate the ball. 


Use the Gradient Tool [G] 
to fill the circle, using lighter 
and darker versions of your 
chosen colour to adda 
shadow to the ball. 


We added the blue spots in 
a separate layer using the 
Elliptical Marquee Tool. To 
enhance the 3D effect press 
(Ctrl]+[T] ([Command]+[T]) 
to activate the Free 
Transform options, then 
rotate and squash the spots. 


Choose the colours for 
your ball and its spots by 
clicking on the toolbox 
swatches to open the Color 
Picker dialog. 
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Simple animation 


Into ImageReady 


Now we'll open our source file in ImageReady, 
and start turning static layers into movement 


Once you've created your ball save 

it as Ball.psd, so you have a full-sized 
version of the ball (or open our Ball.psd 
source file from the disc). Then click on the 
Edit in ImageReady icon at the bottom of 
Photoshop’s toolbar — alternatively press 
[Shift]+[Ctrl]/[Command]+[M] to do the job 
with a keyboard shortcut. 


The bali document will open in 
ImageReady. Go to ImageReady’s 
options bar at the top of the screen, and 
choose the Direct Select Tool. Click and drag 
the cursor over the ball to select all its layers 
in one operation. Group the selected layers 
together by pressing [Ctrl]/[Command]+[G], 
or go to Layer > Group Layers. Label the 
grouped layers ‘Ball Group’ 


3 | Select the Ball Group, and press 
[Ctrl]/[Command]+IT] to activate the 
Free Transform options. These work in the 
same way as in Photoshop. Hold down 
[Shift] to constrain the ball’s shape, and drag 
a corner handle to scale it down. Hit [Return] 
to apply the transformation. Then use the 
Move Tool [V] to position the ball in the air. 


Now turn to the Animation palette (if it’s 
not visible go to Window > Animation). 


Frame 1 shows your transformed layers with 
the ball hovering in the air. The first frame 
will show by default all the layers that are 
visible in the Layers palette. The ball is now 
ready to be animated. 


Selection 

In Step 2 we use the 

Direct Select Tool to select 
all the balls layers. This 

is a tool that’s unique to 
ImageReady CS2- if you're 
using older versions of 
ImageReady you can select 
all the layers by holding 
down [Shift] and clicking on 
them in the Layers palette. 


On target 

In ImageReady CS2 the 
active layer that has been 
targeted in the Layers 
palette is indicated in the 
work area by a blue box; 
this is a handy way of 
selecting, organising and 
manipulating layers. If you 
click on an object in the 
work area with the Direct 
Select Tool it will be selected 
in the Layers palette. 
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Key frames and tweening 


Down, not sideways 
When you move the ball in 
Step 5, hold the [Shift] key 
as you move it to prevent 
the ball from moving 
horizontally. It’s important 
that the ball doesn't fall to 
the left or right, because it 
needs to bounce back up 

to its original position — it 
would look odd if the ball 
fell to the left, then bounced 
back to the right without 
hitting an obstacle to cause 
this behaviour. 


Cool key frames 

Thanks to tweening you can 
create many intermediate 
frames from two key frames. 
A traditional non-digital 
animator would have drawn 
the ball ona transparent 
cell, and recorded the cell 
moving in small increments. 
Thanks to ImageReady we 
don't need to record our 
balls movements ina 
step-by-step fashion -a 
couple of key frames and the 
Tween dialog will do the job. 
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Create key frames, then tween them to add 
intermediate frames of animation in seconds 


© Wee 


io to the Animation palette, and 

click the ‘Duplicates current frame’ 
button. You'll now have two identical 
frames in the palette, and Frame 2 will be 
highlighted in blue. Select the Move Tool, 
and make sure it’s set to Layer Move Tool in 
the options bar. Click on the Ball Group layer 
in the Layers palette, so that all the ball’s 
layers will be moved by the tool. 


fe] Hold down [Shift], and drag the ball 

to the bottom of the canvas. Look in 
the Animation palette: Frame 1 shows the 
ball in the air, and Frame 2 shows the ball 

on the ground. Press the Animation palette’s 
Play button, and the ball will jump between 
its start and end positions. 


To turn the ball’s two flickering key 
frames into a smoother, multi-frame 
animation, target Frame 2 in the Animation 
palette by clicking on it. Then click on 

the Tween button at the bottom of the 
Animation palette, and choose Tween With: 
Previous Frame. In the Tween dialog go to 
the Frames to Add section, and type ina 
value of 8. Set Layers to All Layers. Click OK. 


fs] You'll now have 10 frames of animation 
in the Animation palette. Press Play, 
and watch the ball move between the first 
key frame and the last. ImageReady 
automatically creates intermediate frames 
between the ball’s start and end positions, 
creating the impression that it’s falling. 


Simple animation 


What comes down... 


_..must go up! Add more frames to make the 
ball bounce back to the top of the canvas 
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te] To make the ball bounce back into the 
air target frame 10, the last frame in 
the Animation palette. Click the Tween 
button again. This time set the Tween With 
option to First Frame; this will generate 
more frames to make the ball move from 
the ground back into the air. Add eight more 
frames, and click OK. 


ImageReady automatically generates 

more frames to take the ball from the 
ground in frame 10 back to its starting 
position. Your original two key frames have 
been used to create a sequence consisting 
of 18 frames. Play the animation, and set 
the looping option to Forever. The ball will 
bounce up and down continuously — stop 
the animation when you've had enough! 


Click repeatedly on the ‘Selects next 

frame’ button in the Animation palette 
and watch the ball move step-by-step, and 
look in the Layers palette. The three layer 
thumbnails that make up the ball’s texture, 
spots and highlight all update to indicate 
the new position of each layer’s content for 
each frame in the animated sequence. 


fe] Test the animation by clicking the 
‘Preview in ieexplorer’ icon in 
ImageReady’s toolbar (Mac users can access 
Safari). The browser will open, and you'll see 
how the animation will play when viewed 
online as an animated .GIF. At this stage the 
bouncing ball is far from convincing, so over 
the next few pages we'll look at ways to 
make the ball bounce more realistically. 


Looping 

In Step 10 your ball will keep 
bouncing non-stop because 
the looping option is set to 
Forever. To create a smooth 
and seamless loop the last 
frame in the sequence 
(frame 18) is not identical to 
the first frame (frame 1). This 
is because two identical 
adjacent frames in a looping 
sequence would cause 

the cycling animation to 
stutter, as they would play 
twice, while all the other 
frames play just once. 


ImageReady versions 
The walkthroughs and 
projects in this guide have 
been created using 
ImageReady CS2 - it’s 

very similar to the CS 
incarnation, but we'll point 
out any important 
differences as we go. If you 
have an older copy of 
ImageReady you'll find lots 
of extra information in the 
PDF version of Focus Guide 
issue 10, which is on the 
cover disc. 
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Chapter 2 


Faking physics 


Doit for real 

We take the physics of the 
world around us for granted, 
but the influence of wind 
resistance, friction and 
momentum (as well as the 
material the ball is made of) 
have to be painstakingly 
added to our animations 

as hand-crafted key frames. 
Experiment by bouncing a 
ball - you'll soon see how 
complex its behaviour is 
compared with our initially 
simple animation. 


Mimic real-world physical effects to make your 
bouncing ball animation more convincing 


O nce you’ve finished 
previewing the animation in 
your web browser close it. Go back 
to ImageReady, and play the falling 
ball animation again. The ball’s 
movement is less than convincing, 
because it appears to have no mass 
or substance. In the physical world 
the ball would be affected by a 
variety of factors that don’t exist in 
the virtual world. Real rubber balls 
have elasticity, and an impact with 
the ground temporarily changes their 
shape. However, our animated ball 
remains a perfect sphere, and after 


THE LIMITATIONS OF TWEENING 


hitting the ground it appears to float 
up rather than bounce, as if it were 

a balloon filled with helium. In 
addition, a real ball’s energy would 
be absorbed by its impact with the 
ground, affecting its speed. Our 
virtual ball lacks all the subtle visual 
cues that we witness when a ball hits 
the ground in real life. Fortunately, 
Photoshop and ImageReady have 

all the tools and techniques that we 
need to make our ball behave more 
realistically, by causing it to deform 
when it lands, and regain its shape 
when it springs back into the air. 


Changing the ball’s shape isn’t as easy as changing its position 


Changing the shape of the ball in ImageReady to make it 


squash when it hits the ground is not as straightforward as 


it sounds. Your instinct might be to go to the frame in the 


Animation palette where the ball lands, and use the 


Transform options to deform the ball at that particular 


frame. However, if you do that ImageReady will alter every 


frame in the Animation, so that the ball will fall and bounce 


in its squashed state. This is due to the fact that although 


you can tween the position of a layer’s content to make it 


move, you can't tween a transformation that changes the 


ball’s shape. Fortunately, you can overcome this constraint. 
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When the ball hits the ground you 
need to create a squashed version, 
to give it a sense of mass 


Simple animation 


Frames into layers 


Before you can modify the frames of your 
animation you need to convert them into layers 


O n the next page you're going 
to add more frames and layers 
to your project, and transform 
specific layers to make the ball 
squash and stretch. At this stage 

in the project the Layers palette 
contains the component layers that 
make up your ball’s shape and 
texture. As you step through the 
frames in the Animation palette, the 
position of the components in the 
Layers palette changes. To enable 
you to modify individual frames in 
the sequence (to squash and stretch 
the ball on impact with the ground) 


nays 


a3 
Ke 
s 


[te 


ImageReady enables you to turn frames in the 
Animation palette into new layers, so that you 
can modify individual layers 

you’ll need to convert the 18 frames 
in the Animation palette into 18 new 
layers — see below for how to do this. 


ONE-CLICK CONVERSION 


Save it! 

This stage in the project is 
agood time to go to File > 
Save As, and save your 
project. Save it as Ball02. 
psd. If you get lost while 
you're adding extra frames 
and layers to your project, 
you can retrace your steps 
and start again by going to 
File > Revert (or simply hit 
the [F12] key. 


Turning your frames of animation into editable layers is simple 


Click the arrow button to open the Animation palette’s 
menu, and select the Flatten Frames Into Layers option; this 
creates 18 new layers in the Layers palette. Step through the 
sequence frame by frame. As you advance through the 
frames in the Animation palette (using the ‘Selects next 
frame button’) the relevant layers in the Layers palette 


become visible or invisible — notice the layer visibility eye 
icon appear for individual layers when it’s their turn to make 


an appearance in the sequence. There's also a ‘Selects next 


As you step through the sequence 
in the Animation palette, each layer 
becomes visible in the Layers palette 


frame in animation’ button at the bottom-left of the Layers 
palette, enabling you to step through the sequence. 
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Chapter 2 


Squash the ball 


By the numbers 

In step 4 we squash the 
ball by dragging the 
transformation handle 
downwards with the 
cursor. For a more precise 
deformation you can type 
inanumber of pixels by 
which the ball is squashed, 
using the input boxes in the 
options bar, 


Where's layer 17 

When you convert your 18 
animated frames into 18 
layers, notice that the layer 
corresponding to frame 1 is 
called Layer 2-you might 
have expected it to be called 
Layer 1. This occurs because 
layer 1 is already occupied 
with content. ImageReady 
keeps the ball’s component 
layers in the Layers palette 
in case you need access to 
them ata later stage. 

The original ball component 
layers remain invisible 
throughout the sequence, 
as they’re no longer needed 
to generate frames. 
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Modify individual layers to create new frames 
that add character to your animated ball 


Before continuing, re-label the 18 new 

layers to correspond with the frames 
in the Animation palette. When Frame 1 
is selected in the Animation palette, the 
visible layer in the Layers palette should be 
called Layer 1. This will stop you getting 
confused when you need to target and 
modify specific frames in the sequence by 
editing the appropriate layer’s content. 


Advance to frame 10 in the Animation 
palette; this is the frame in which the 
ball hits the ground. Notice that Layer 10 is 
the only layer visible in the Layers palette, 
as this is the layer that corresponds to 
frame 10. In the Animation palette click the 
‘Duplicates current frame’ icon: this creates a 
new frame for Frame 11, so you'll now have 
19 frames in the Animation palette. 


i] Select Layer 10 in the Layers palette, 
and drag it to the Create a new layer 
button to create a copy. Call the copied layer 
‘Squash’ Advance to the newly created 
Frame 11 in the Animation palette. Notice 
that both Layer 10 and Squash are visible in 
the Layers palette. Turn off Layer 10, so that 
only the Squash layer is visible when we get 
to Frame 11 in the Animation palette. 


Target the Squash layer in the Layers 

palette, and go to Edit > Transform > 
Scale. This creates a transform bounding 
box around the ball. Squash the ball by 
dragging the bounding box’s top middle 
handle down a few pixels. Click OK to apply 
the transformation. Play the sequence, and 
watch the ball land in frame 10, and then 
squash in Frame 11. 


Simple animation 


Stretch the ball 


The next step is to make our ball stretch 
as it starts to spring back into the air 


ar he ball will now squash when 
it hits the ground, thanks to 
the extra frame you added to the 
Animation palette and the extra 
‘Squash’ layer that you added to the 
Layers palette. By modifying layers 
you can enhance a simple sequence, 
and make it far more convincing. 
Follow the instructions below to 
modify one of the existing frames 
in the bouncing ball sequence — by 
making the ball stretch as it leaps 
into the air you'll end up with a 
much more realistic animation that 
gives the ball a sense of weight and 


STRETCHING THE BALL 


Advance to Frame 12, 
which shows the ball as 
begins its leap into the air. 


By stretching the ball as it leaps into the air 
you can enhance the animation, and give the 
ball more character 

elasticity. You can apply these 
techniques in all kinds of ways to 


create and enhance other animations. 


Layer 11 will become visible 
in the Layers palette. 


Target the Stretch layer in 
the Layers palette, then Edit > 
Transform > Scale the ball to 
make it stretch upwards. 


Squash&Stretch.gif 

To see how your animation 
should be shaping up, play 
the Squash&Stretch.gif from 
the CD. This will show you 
what your animation will 
look like after adding anew 
frame in which the ball is 
stretched when it bounces 
off the ground. You'll also 
find a PSD file called Ball03. 
psd - this is what your own 
project should look like 

at this stage. You can play 
the animation frame by 
frame, to see how the 
various layers change. 


Re-name Layer 11 ‘Stretch 
This is the layer that you're 
going to modify to createa 
stretched ball that appears 
in Frame 12. 


Test the frames by clicking 
here to move through the 
animation step by step. The 
relevant layers will become 
visible when required to 
create the animation. 
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Bounce to a stop 


Key frames 

Your 19 frames of animation 
were created from two 
original key frames, and as 
you've worked through the 
bouncing ball project you've 
discovered how to modify 
tweened frames to add 
character to the sequence. 
On this page you'll add 
more events to the 
animation by modifying 
existing layers in the Layers 
palette, enabling you to 
build up a more complex 
animation from justa 
couple of key frames. 


Modify the animation to make the ball bounce 
progressively lower, before coming to a halt 


A this stage in the project the 
19 frames that make up the 
animation enable the ball to bounce 
forever, because the position of the 
ball in the last frame (19) allows it 
to smoothly cycle back to Frame 1 
with no noticeable hesitation. This 
enables you to keep the ball looping 
forever, if you want, as a GIF. 
Alternatively, you can make the 

ball behave more realistically by 
modifying the frames to make it 
bounce less and less until it comes to 
a halt — this will mimic the physical 
effects of friction. To make this 


SLOW THINGS DOWN 


You can create a more realistic animation 

by having the sequence play once, instead 

of looping forever 

effect work you will of course have 
to change the looping option to 
Once, rather than Forever. 


Add new frames, and modify the visibility of existing layers 


You have all the layers you need in the Layers palette to 
make the ball slow down and stop — all you need to do 
is add some new frames in the Animation palette, and 


change the visibility of the existing layers, to make the ball 
bounce several times, but have it bounce less high each 
time. You can then fine-tune things such as the timing of 
the last few frames, to make the last couple of short 
bounces a little bit faster than the rest as the ball finally 


comes to a halt. This will create a more realistic animation, 


By adding new frames you can 
reduce the height to which the ball 
rises after each bounce 


although by adding more frames you'll create a larger GIF. 
Follow the walkthrough opposite to bring the ball to a halt. 
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Simple animation 


Editing your layers 


Add some new frames, and modify the layers 
to make the ball bounce gradually to a halt 


ft] Select Frame 19 in the Animation 
palette, and click the ‘Duplicates 
current frame’ button to create Frame 20; 
this creates a copy of the frame showing the 
ball at its highest position. Make sure Frame 
20 is selected. Go to the Layers palette and 
turn off the visibility of layer 18, which 
shows the ball at its highest point. Turn on 
layer 17 to make the ball begin to fall. 


Target frame 20 in the Animation 
palette, and duplicate it to create 
Frame 21; frame 21 will automatically 
become selected. Go to the Layers palette 
and turn off the visibility of layer 17, and 
turn on the visibility of layer 16. This will 
make the ball continue to fall. 


Repeat this technique, and keep 
duplicating the latest frame in the 
Animation palette, then editing the relevant 
layer’s visibility in the Layers palette to make 
the ball drop lower, until you get to Frame 
25. This frame should be showing layer 12, 
which is just above the Stretch layer. 


At this stage you don’t want the ball to 
stretch before it hits the ground, as this 
will look wrong (and give the game away 
that you're using the same layers that made 
it bounce up). When you duplicate Frame 25 
make the ‘Squash’ layer (not the ‘Stretch’ 
layer) visible, so that the ball deforms on 
impact. The ball will now fall, bounce, fall 
again, and stop in the squashed position. 


Ball03.psd 

You should have your own 
version of the animated 
bouncing ball by this stage. 
If you've encountered 
problems, and want to 
follow the walkthrough on 
this page, you can use 
Ball03.psd from the CD asa 
source file, It contains the 19 
frames and 18 layers that 
we'll show you how to 
modify in these steps. 


Ball04.psd 

To see how your project 
should behave once you've 
finished modifying the 
frames and layers in this 
walkthrough, take a look at 
Ball04.psd. It shows the ball 
falling, bouncing and falling 
again until it stops in the 
squashed position. Make 
sure that the looping option 
is set to Once. 
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Finish the sequence 


Continue adding frames and modifying 
layers until the ball finally comes to a halt 


O n the previous page you 
created new frames in the 
Animation palette, and changed the 
order in which the layers became 
visible to make the ball bounce less 
high after its second impact. At the 
end of the walkthrough the ball had 
landed for the second time in its 


Ball05.psd 

Compare your project with 
the one we used in this 
walkthrough to see how it 
shapes up. You could make 
your animation more 


realistic by adding extra key a 

frames, although this will squashed position. You should now 
bumpupthefilesizeofthe he able to create a new frame, turn 
finished GIF. 


off the Squash layer and turn on the 
Stretch layer to make the ball take to 
the air again. Carry on adding new 
frames, and making the relevant 
layers visible, to make the ball 


ANALYSE THE FINISHED PROJECT 


After the final squash frame, complete the 
sequence by creating a new frame and turning 
on the layer with the ball in its original shape 
bounce again, making it bounce less 
high each time until it eventually 
comes to a stop. 


Throughout the project 
we’ve been manipulating a 
grouped set of layers. These 


Our finished animation 
used 18 layers to create 37 
frames. We could have used 


original layers are still in the 
Layers palette, should we 
need to access them. 


Ifyou drew a line through 
each thumbnail youd geta 
curve that would decrease as 
the ball bounces lower, and 
then stops. This helps you to 
get an understanding of the 
ball’s movement. 


Here we can see where the 
Squash layer is made visible 
in the Layers palette. 
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the same number of layers 
to add a few extra bounces. 


To make the ball land we 
used the same layers that 
made it spring upwards; this 
saves on the number of layers 
that are required to create 
the sequence. 


After the ball has become 
squashed on impact, it 

Stretches as it begins to rise 
back into the air. 


Optimise your animations 


Simple animation 


Optimise your large animated GIF to reduce its 
resolution and file size, so it downloads faster 


B efore we save our animation 
in a format suitable for online 
viewing, let’s have a quick recap to 
reinforce what you’ve learned from 
this chapter. By following the 
walkthroughs you’ve created a 
simple ball source image composed 
of three layers, and then used the 
Animation palette to create multiple 
frames of animation from these 
source layers. The first animation 
you made featured a ball bouncing 
in a simple cycle. You then turned 
the frames into additional layers, and 
used them to make a more complex 


animation that had a beginning, 
middle and end (the ball falls, 
bounces and comes to a halt). 

You then learned how to add 
character to the ball, and make it 
behave realistically, by creating and 
transforming additional layers to 
make it appear to squash and stretch 
on landing and take-off. 

Both animations were created 
from a source file that’s much larger 
than the average animated GIF. To 
finish off our ball project we'll look 
at ways of cutting the files down to 
size, to create a web-friendly GIF. 


EXPORT TO A BROWSER 


Web optimisation 

For a detailed look at 
optimising images for the 
web read through Chapter 3 
of Photoshop Focus Guide 
10, which you'll find on the 
CD. This guide focuses on 
web imagery more than 
web animation, but the tips 
and tricks it contains will still 
help you to create smaller 
animated GIFs. 


Use Internet Explorer (or any browser) to analyse your GIF 


Let's optimise the looping animation first. You'll find our 
version of that on the CD (BallLoop.psd). In ImageReady, 


click on the ‘Preview in ieexplorer’ icon in the toolbar. When 
the animation appears in the browser window scroll down. 
This will give you lots of useful information about the GIF 
that ImageReady has created, including file size. Our GIF 
weights in at a hefty 455.5K, and has a monstrously large 


dimensions of 1200 pixels wide by 848 pixels high. It’s easier 


to work with a large file in Photoshop and ImageReady, but 


When you preview your GIF ina 
browser you'll be able to see its size 
and dimensions 


we need to do a bit of work so that it won't take ages to 
download, and appear too large in a browser. 
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Reduce the file size 


Full screen mode 
Before cropping your file to 
make it narrower, press the 
IF] key. This changes the 
interface from Standard 
Screen Mode to Full Screen 
Mode with Menu Bar. This 
mode places the image at 
the centre of your screen, 
and changes the rest of the 
background to a neutral 
grey, enabling you to work 
on cropping the file without 
being distracted by other 
on-screen elements. 


On target 

When you're using a tool 
such as the Crop Tool, the 
cursor changes to anew 
icon specific to that tool. 

The shape and design of 
some cursors makes it quite 
tricky to decide exactly what 
pixels you're selecting, so to 
turn a tool's icon into a more 
useful target crosshairs icon 
simply press the caps lock 
key: you can now be more 
precise when using a tool to 
select specific pixels. 
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Trim off any unnecessary ‘fat’ to create 
a lean and lightweight animated GIF 


ft] Close your browser window, and go 
back to your file in ImageReady. As 
the ball only bounces up and down on the 
spot, the file contains lots of unnecessary 
information to the left and right of the ball. 
To remove the empty parts of the file select 
the Crop Tool [C]. Draw a marquee around 
the ball, so that the unwanted edges of the 
file are greyed out. 


fe] Hit [Return] to crop the file. This will 
create a narrower, more suitably 
shaped file. Hit the Play button to make sure 
each frame is still visible, especially when 
the ball squashes and stretches. If you've 
over-cropped any frames press [Ctrl]+[Z] 

to undo the crop. Target a problem frame in 
the Animation palette, and re-crop to make 
sure that the ball isn’t clipped in any frame. 


Now it’s time to cut the animation down 
to size by reducing its dimensions. Go 
to File > Image Size. In the Image Size dialog 
box we can see that our file is a whopping 
323 pixels wide by 848 pixels high. You 

can either type in smaller dimensions, or 
reduce the percentage to 40%. This creates 
a smaller file of 129x339 pixels, which is 
more suitable for viewing in a browser. 


Click OK to apply the changes. Save 

the file as BallLoop.PSD (so you can 
access your larger original file if required, 
and make changes to it at a higher quality). 
Preview the image again, and you'll find 
you have a much smaller and lighter GIF. 
Feel free to trim the image’s size down even 
more, to make the file even smaller. 


Simple animation 


Create the finished GIF 


Save your two versions of the animated 
ball project as GIFs for export to the web 


ur second ball animation 

(BallOnce.psd) consists of 
more frames (37 in total) than the 
looping version (20 frames), as we 


Play it again 
had to use more frames to make the When you preview the 
ball bounce a few times before animation that shows the 

os a ball bouncing once, it will 
coming to rest. This creates a larger play once then stop at the 


last frame. To see it fall and 
bounce again you'll need to 
reload it into your browser. 
Press (Ctrl]/[Command]+[R] 


GIF: previewing the BallOnce.psd 
file as an un-optimised animation 


shows us that the final file will be Thesecond ball animation (BallOnce) has eee ini egainito oe 
a hefty 839.4K. Use the techniques more going on in it; as aresult it contains dirvenion ouihebomiclig 

: s frames, and makes for a larger GIF 
described on the previous page to Fae Ta ag nee ae a Hal das ea be haat 
crop away the unwanted area around _ palette. After cropping, reduce its browser's icon - the GIF will 
the BallOnce.psd file, and make sure size to 40% — the optimised version happily play ina browser 
without any need for it to be 


it’s set to play Once in the Animation _ will weigh in at around 200K. installed on a machine. 


SAVE YOUR ANIMATION 


Turn your file into a self-contained GIF that will play in a browser 


At the moment, only people with ImageReady can view 
your animation. To make it available to passing web surfers 
who don't have ImageReady, go to File > Save Optimized As. 
In the dialog box that opens give your animation a name. 

At this stage you only need to choose Images Only (*gif) 
from the Format menu; we'll look at the other file type 
options later, when we start to combine animations with 
image maps, and need an HTML file to organise things. Stick 


with Default Settings as the Settings option for the moment; 


Turn your projects into optimised, 
lightweight animated GIFs using the 
the browser preview indicated it would be. Save Optimized command 


this will create a .GIF that’s the same size and resolution as 
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CREATING 
FOGOS FORAY 
AND THE WEB 


Develop your animation skills by creating 
logos that you can use to augment your 

websites — you'll discover some powerful 
new tools and techniques in the process 


ac he skills that you’ll pick up by 
working through the exercises 
in this chapter can be used as a 
springboard to creating much more 
complicated animations. The 
techniques required to animate a 
text layer so that it zooms in or out 
can be applied to your own graphics, 
to create your own unique, website- 
enhancing logos for example. 


Flying logos 

The phrase ‘flying logos’ is used in 
the creative industries to describe 
one of the main “bread and butter’ 
jobs undertaken by animators. 
Every company needs a logo to 
help brand itself and its products, 


and many designers find that a large 
chunk of their time is taken up in 
creating animated logos. Logos that 
are seen on the web, or ona TV 
screen, often feature an animated 
element. This can range from a 
subtle glint of light moving across 
a static logo to having the letters 
of the logo fly into position one by 
one. Animating a logo helps draw 
attention to it, and having an 
animated logo can also make your 
own website look more visually 
interesting, and may encourage 
surfers to stick around and explore 
your site’s content. 

Photoshop and ImageReady 
possess plenty of tools to help you 


Page 40 Create an animated band 
of light that reflects off alogo 


Page 48 Create and animate a logo 
designed to be played on TV 


create animated logos for both the 
web and the TV screen, and you can 
even create animated title sequences 
for videos or DVDs from the 
comfort of Photoshop’s interface. 
You'll learn how to use the tweening 
technique covered in the previous 
chapter to create many different 
types of movement; we’ll show you 
how to zoom, slide and even rotate 
layers to create a variety of typical 
flying logos. You’ll also discover 
how to tween other Photoshop 
attributes, like layer styles, to add 
logo-enhancing effects such as 
moving reflections in metallic text. 
We'll show you how you can edit the 
attributes of dozens of layer styles to 


Page 41 Tween layer style settings 
to make your logo’s reflection rotate 


Page 50 The Custom Shape Tool is 
a valuable graphic design resource 


Page 46 Create an action to adda 
flickering animated glow to any text 


Page 53 Use Photoshop’s Displace 
filter to make your animated flag flutter 


create all sorts of animated effects 
quickly and effectively. 


Overcoming constraints 

In this chapter you’ll also discover 
how you can overcome some of the 
constraints you’ll face when trying 
to create specific types of animation 
in ImageReady. You can’t tween an 
object to make it rotate for example, 
so we’ll show you how you can work 
around this constraint. And, if you 
create a flying logo to be viewed 

on TV, you’ll need to know how to 
avoid it appearing squashed — check 
out page 48 to discover the crucial 
difference between a PC monitor’s 
pixels and those on a TV screen. 
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Glinting text effect 


Glinting Logo.gif 

To see how effective the 
glinting light effect can look, 
check out the finished GIF 
on the cover disc. All the 
movement in the animation 
is created by tweeninga 
single layer to move from 
one side of the logo to the 
other. You can create 
striking logos like this in 

a matter of minutes! 


Create a 3D metallic logo, and make it glint 
using tweening and a layer blending mode 


\ \ ] hen creating an animated 
logo it’s hard to avoid falling 
into cliché, and many companies and 
organisations use metallic-looking 
logos that feature an animated light 
effect glinting off the surface of the 
logo’s lettering. However, clichés 
exist for a reason, and adding a 
touch of animated light reflecting 
off a metallic logo is an effective yet 
subtle way to give your static logo 
a hint of eye-catching movement; 
by animating the light effect you 
avoid the need to make the logo’s 
letters jump or zoom around the 


BEAUTIFUL BLENDS 


If we use the Normal layer blending mode the 
white bar layer will remain solid, obscuring the 
text instead of making it glint 

screen. The glinting metallic logo 

is a simple yet fun effect to create 

in Photoshop and ImageReady. 


Use a layer blending mode to create the animated glinting effect 


By default, a Photoshop layer is set to the Normal blending 


mode. By changing the blending mode of a layer you can 


create all sorts of dramatic and creative effects to enhance 


your animations. In the following walkthrough you'll use the 


Overlay blending mode to make a solid white bar on a top 


layer cause the text layer beneath to glint like metal. The 


Overlay blending mode will make most of the white bar 


vanish, so only the areas of the white bar that overlap the 


letters will stay visible. Once you've mastered the technique 


covered in the walkthrough, experiment with other layer 


blending modes to see how they affect your animation 
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Changing the white bar layer’s mode 
to Overlay enables the text beneath 
to glint as the bar moves across it 


Animated logos 


Creating the text 


The first step is to create the metallic text, by 
combining a variety of Photoshop's layer styles 


a Create a new Photoshop document. 
bee] Select the Horizontal Type Tool, and 
select a font from the options bar - we chose 
Times New Roman, and set it to Bold to 
create a logo with strong letters that would 
look good in chrome. Type some white text 
ona black background. 


] To give the logo's 2D letters a more 
|“ striking 3D appearance, click the Add 

a layer style button at the foot of the Layers 
palette, and choose Bevel and Emboss from 
the menu. In the Structure section choose 
Inner Bevel, Set Technique to Chisel Hard, 
Increase the Depth to 181%, and set the Size 


of the bevel to 8 pixels. Click OK. 


r _ | Tomake the letters look more shiny, 
|___J tick the Satin option in the Layer Style 
dialog box. Click on the word Satin to edit 
that style’s attributes, and set the Opacity 
to 56% to increase the contrast between 
the light and dark parts of the logo. Set 
Angle to 39%, and set Distance to 15 pixels 
to offset the Satin effect. 


fa] To add a hint of colour to the logo tick 
the Color Overlay option in the Layer 
Style dialog box, and click on the words 
Color Overlay to edit the style’s attributes. 
Choose a colour for your logo by clicking on 
the colour box to activate the Color Picker. 
Reduce the Opacity of the colour to 47% to 
make the effect more subtle. You now have 
a solid-looking metallic logo. 


Doit yourself 

In this walkthrough we 
show you how to create 
solid-looking metallic text 
from a two-dimensional 
text layer. The depth and 
bevel settings we use to 
create our 3D logo aren't 
absolutes ~ feel free to 
experiment with different 
values when you edit the 
attributes of the various 
layer styles. 


Colour picking 

When you choose a colour 
for your logo in step 4 you 
activate the Color Picker. 
If you're creating a logo to 
be viewed online you can 
leave it to ImageReady to 
optimise the logo for the 
web, and this might mean 
that the colour you choose 
will be slightly altered toa 
more web-friendly colour. 
To avoid changes in colour 
at the optimisation stage 
click the Only Web Colors 
box in the Color Picker. 
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Adding the glint 


Use ImageReady’s animation tools to create a 
moving band of light to highlight your logo 


Save it 

When you've created the 
components for your 
animation in Photoshop, 
save the file before diving 
into ImageReady; this will 
give you a back-up file that 
you can access if your initial 
animations don’t turn out 
the way you desire. 


Modifying movement 
Our shiny logo features light 
moving from left to right. 
The animation can then be 
set to loop so that the light 
source continues to pass 
across the logo in the same 
direction, Alternatively, use 
the Tween options to tween 
between the last frame and 
the first — this will make the 
light sweep back and fourth 
across the logo. 
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| Create a new layer called ‘Light Bar’, 
| and make sure it’s above the other 
layers in the stack. Set the foreground 
colour to white, then select the Gradient 
Tool [G]. Open the Gradient picker from the 
options bar, and choose the Foreground to 
Transparent Gradient preset. Click OK. 


~ | Click on Reflected Gradient in the 
| options bar, and make sure that the 
Transparency box is ticked. Target the Light 
Bar layer in the Layers palette. Place the 
cursor at the beginning of your logo, and 
click and drag to the right to draw a vertical 


soft-edged white bar. 


‘) You're now ready to animate your logo 
.. to make the light source glint off the 
text. Click on the Edit in ImageReady button 
(or press Shift+[Ctrl]/[Command]+[M]). 

Go to the Animation palette, and click the 
Duplicate current frame button. Select 
Frame 2, and use the Move Tool to place the 
vertical bar of light at the right of the logo. 


"Click the Tween button, and select 

Tween With: Previous Frame. Choose 
12 frames, and make sure the All Layers 
option is selected. Click OK to add frames 
that make the white bar move from the left 
to the right. To make the white bar illuminate 
only the highlights of the logo target Frame 
1, go to the Layers palette, and set the Light 
Bar layer’s blending mode to Overlay. 


Animated logos 


Animating layer styles 


Create an alternative metallic logo effect by 
animating the reflections inside the lettering 


S o far in this chapter you’ve 
created movement by tweening 


between two different frames; the 
only difference between the start and 
end frames of your glinting metallic 
logo animation is the position of the 
vertical white bar. The additional 
in-between frames created using the 
tweening technique make the white 
bar move from left to right, causing 
the logo’s highlights to appear to 
flare up as the bar passes over them. 
As well as using tweening to make 
a layer’s components move around 
the screen, you can also tween layer 


styles to animate them, and by 
animating layer styles you can create 
a more convincing and effective 
animation. In the box below we’ll 
explain how you can make the 
metallic reflections in your logo 
move as if they’re being affected by 
a changing light source — you’ll do 
this by animating the Satin effect’s 
Angle attribute. Once you’ve 
mastered the process of animating 
layer styles you’ll be able to create 
all sorts of amazing effects that you 
can use to enhance your animations 
in a variety of ways. 


TWEENING A LAYER STYLE 


Satin.gif, Combined.gif 
Check out Satin.gif, our 
alternative metallic logo. 
The animated reflections in 
this version are created by 
tweening between two 
frames that have different 
layer style settings. As you'll 
see from Combined.gif, you 
can use tweening to adda 
moving glint of light toa 
logo’s letters and animate 
layer style reflections at the 
same time, enabling you 

to create a much more 
sophisticated animation. 


Animate the logo’s Satin layer style to create a moving reflection 


To animate the Satin layer style you'll need to restore your 
logo to a single frame in the Animation palette. Hold down 
[Shift], and select the frames you created in the previous 
walkthrough, and delete them all by clicking the ‘Deletes 
selected frames’ button (the trashcan icon); this will leave 
you with Frame 1. Click the ‘Duplicates current frame’ button 
to create a new Frame 2. Double-click on the Satin effect in 
the Layers palette. Change the Angle to -122 degrees. Now 
use the tween technique to create 12 new frames between 
the Frame 1 and Frame 2. Play the sequence, and you'll see 
that the reflections within the logo's shiny surface move. 


Create shimmering reflections in the 
surface of your logo by tweening the 
Angle attribute of the Satin layer style 
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Creating text in ImageReady 


Doit yourself 

To create unique logo 
designs you can fill your text 
with your own patterns and 
textures using the Pattern 
Overlay option within the 
Layer Style dialog box. 
Instead of selecting a preset 
pattern from the pop-up 
menu, click the pattern 
preview to open the Pattern 
picker, and click on the 
arrow to open the menu. 
You can now navigate toa 


Use ImageReady’s text creation, editing and 
animation tools to streamline your workflow 


iG our previous logo project we 
created reflective metallic text 

in Photoshop, before exporting it 

to ImageReady so we could animate 
the glinting effect. An alternative 
approach is to create and edit the 
text entirely within ImageReady, as 
well as selecting and editing the 
text’s layer styles. Creating and 
animating text ‘under one roof’ 
saves you time, as you don’t need to 
jump back and forth between 
ImageReady and Photoshop. 


Photoshop Me containing To create text in ImageReady you 
a pattern or texture that . 

you've created. can use the Type Tool [T] in exactly 
PERFECT PATTERNS 


the same way as you'd use it in 
Photoshop, and you can make sure 
that your logo is in the exact centre 
of the screen by clicking on the 
‘Align layer vertical centers’ and 
‘Align layer horizontal centers’ 
buttons in the options bar. On the 
following pages we’ll demonstrate 
how you can get text to zoom in 

and out, to create a traditional flying 
logo effect. Make sure the text you 
create in ImageReady is as large as 
the logo needs to be once it has fully 
zoomed in: this enables you to 
produce a high-quality graphic. 


Click here to reveala 
huge list of pre-designed 


patterns that can be used 
to customise your logo. 


Use layer styles to give 


You can add layers styles 


to your ImageReady logo 
text by clicking on the ‘Add 


your text a Bevel and Emboss 
effect. This will help give the 
logo more depth and solidity. 


Select the Pattern Overlay 
effect in the Layer Style 
dialog box to add a variety 
of patterns to your logo. 
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a layer Style’ icon in the 
Layers palette. 


ImageReady has a much 
greater selection of patterns 
than Photoshop. We choose 
a psychedelic style pattern 

called ‘60's flowers: 


You can fine-tune the 
pattern effect by scaling it 
up or down using this slider. 


Animated logos 


Save time with actions 


Save time making your logo zoom in by using 
one of ImageReady’s pre-designed actions 


\ \ } hen we were animating 

the bouncing ball in the 
previous chapter, and making light 
glint off a logo in this chapter, we 
utilised ImageReady’s powerful 
tweening function. This fantastic 
feature enables you to make an 
object move from point A to point B 
by automatically generating the 
intermediate frames required to 
show the object moving across the 
screen. Tweening saves you loads of 
time and effort, as you don’t need to 
create the intermediate frames of the 
animation by hand — you can tween 


an object’s position to create moving 
graphics in seconds. However, 
tweening has its limitations; you 
can’t tween between a small font and 
a large font to make your text zoom, 
for example. Creating a zooming 
logo can be a time-consuming 
business, as you have to create a 
duplicate text layer for each new 
frame in the sequence, and scale 
each layer down in increments. 

This is a tedious job, but fortunately 
ImageReady has a special action 
that’s designed to get your text 
zooming with a single click. 


ImMAGEREADY’S ACTIONS IN ACTION 


Zoomin.gif 

After designing our logo 
at full size we were able to 
get it to zoom in seconds 
using ImageReady’s Zoom 
In action - check out the 
Zoomin.gif on the disc to 
see how smooth and 
effective the zoom is. 


Go to Window > Actions 
to open the Actions palette, 
or click the Actions palette’s 


tab in the palette dock. 


By default the Zoom In 
action will place 13 new 
frames between the start and 
end frame. Double-click here 
to edit the Action. 


Select the Zoom In Action, 
and click Play. ImageReady 
will work through all the 
steps in the action to 
generate the necessary 


You can increase the 
amount of frames by 
changing this attribute 
before running the action 
on your original frame. 


The Zoom In action 
generates duplicate layers, 
and automatically shows and 
hides the appropriate layers 
as the animation plays. 


frames and layers. 


Apoge Pror 


When you run the Action 
ImageReady automatically 
generates new frames, and 
scales the logo in each frame 
incrementally. 
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Action stations 


Inaction 

To get an action to work 
you must make sure that 
the text layer you want to 
animate is targeted in the 
Layers palette. If you don't 
have any text selected you'll 
see a warning dialog telling 
you that ImageReady can't 
perform the action correctly. 


Flying graphics 

In this chapter we apply 
actions to text layers to 
create a variety of flying 
logos. You can also apply 
the actions to other types 
of layer content to make 
all sorts of graphics fly 
around the screen. 
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Make the most of the ImageReady’s Actions 
palette to create animated logos quickly 


| he ImageReady Actions 
palette is a fantastic resource, 


and you can use it to get your logos 
moving in a matter of moments. 
It contains a large collection of 
pre-designed actions that enable 
you to create all sorts of traditional 
flying logos, so that you can quickly 
generate animated content for your 
sites (see the box below for a full list 
of the available animation-related 
actions in ImageReady). 

The actions themselves are also a 
good source of information on the 
different ways in which you can 


animate text using ImageReady’s 
tools. Click on the triangle icon next 
to an action to see a list of all the 
steps are involved in that particular 
action. To analyse a specific step’s 
attributes, simply double-click on it; 
this will open a dialog box enabling 
you to see exactly what the step 
involves. After you’ve analysed a 
few actions you'll have a clearer 
understanding of what’s involved in 
animating your text, and you’ll even 
be able to create your own time- 
saving actions from scratch, as we’ll 
demonstrate on the opposite page. 


IMAGEREADY’S ANIMATED ACTIONS 


SPIN - This action creates all the frames you need to make text rotate 
through 360 degrees. The action is designed to create a looping GIF, so 


that the text will rotate forever. 


SPINNING Zoom IN - This action combines the Spin and Zoom In 
actions. It scales the text up from 10% to 100%, and rotates each frame 
through 30 degrees to make your logo spin as it zooms in. Change the 
looping to Once before creating an animated GIF. 


_ SPINNING Zoom QurT - This does exactly the opposite of the previous 
action, making your full-size text shrink as it spins into the distance. 


~ Zoom IN -This action does what it says on the tin! Check out the 
previous page for a closer look at how it does its job. 


_ Zoom Out Apply this action to a text layer, and then watch it 


disappear off into the distance. 


Animated logos 


Create your own action 


Create a flickering neon sign effect, and save 
it as a re-usable action to apply to other text 


= { | Type the text you want to use for the 

| neon sign effect, and choose a font (we 
went for Century Gothic at 300 pixels). Over 
the next few steps you're going create an 
action that uses layer styles to create the 
glowing 3D neon effect; the action will also 
record all the steps required to make the 
logo flicker and glow. You'll then be able to 
apply the effect to any text with one click. 


: Click on the ‘Create new action’ button 
at the foot of the Actions palette, and 
in the New Action dialog box label the 
action Neon Logo; you can assign a function 
key to the Action if you want to activate it 
using a keyboard shortcut. Click on the 
Record button, and the Record icon in the 
Actions palette will turn red. 


fs] Target the text layer in the Layers 

~_| palette. Click the ‘Add a layer style’ 
button, and choose Blending Options. The 
Layer Style dialog box will open. Click on 
the words Bevel and Emboss, so you can 
edit their attributes. Set Style to Inner Bevel, 
Technique to Smooth and Depth to 587%. 
Change the Size slider to 14 pixels to give 
the text a rounder 3D bevel. Set Soften to 2. 


a Click on the Color Overlay layer style. 
| Click on the Set Color box to open the 
Color Picker, and choose a colour for the 
neon sign - we went for a striking green. 
To finish off the effect click on Outer Glow. 
Select a similar green colour for the glow. 
In the Elements section change Size to 5%, 
and Spread to 33; this will add a suitable 
greenish glow to your neon sign. Click OK. 


Finding fonts 

When choosing a font for 
your logo you can quickly 
see how your text looks in 
the various fonts you have 
available, Select the text in 
the main work area, then 
click in the font menu in the 
options bar. Use the up and 
down arrow keys to scroll 
through the font list, and see 
the text change accordingly. 


Recording 

When you're creating an 
action, take your time and 
relax. The record icon 

may be red, but it's not 
recording in ‘real’ time. 
ImageReady will only record 
the final changes you make 
to any attributes in the Layer 
Style dialog box, so feel free 
to experiment with the 
effects until you're happy 
with the look of the logo. 
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Create your Own action continued 


Add ImageReady’s Tween command to your 


action, so that it wil 


GS Ea 


Deleting steps 

As you do something new 
(such as select a frame in 
the Animation palette), 
you'll notice that the step 
appears in the Actions 
palette. If you make a 
mistake you can delete 
unwanted action steps by 
selecting them, and clicking 
on the Trashcan icon at the 
foot of the palette. 


Neon.gif 

Check out our finished 
neon sign logo by opening 
this file from the cover disc. 
Once you've created an 
action you can produce 
animated GIFs in seconds 
using any text, which isa 
fantastic time saver. 
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instantly animate the text 


ts] Having recorded all the steps required 
to create a neon text effect, you now 
need to add animation to the action. Go to 
the Animation palette. Click the ‘Duplicates 
current frame’ icon to create Frame 2. Select 
Frame 2. In the Layers palette double-click 
the Outer Glow effect to open the Layer Style 
dialog. Reduce the Elements Size attribute 
to 8 pixels to shrink the glow. Click OK. 


al Frame 1 now shows the sign glowing 
brightly, and Frame 2 has a reduced 
glow. With Frame 2 selected click the Tween 
button to open the Tween dialog and select 
Tween With: Previous Frame. To create a 
rapidly pulsing glow type 4 in the Frames 
to Add field. Click OK. This will create an 
animation with 6 frames in total. Press the 
Stop recording icon in the Actions palette. 


Play back the animation, and watch 

L7 | the logo pulse and glow. Notice that 
the Actions palette contains your Neon Logo 
action. You can open any of the steps to see 
their elements by clicking on the arrow icon. 
For example, you can see what layer style 
settings the action uses to create the glow 
effect, or see how many tweened frames the 
action will create. 


To test your modified action use the 
Horizontal Type Tool [T] to create some 
new text. Target the text layer in the Layers 
palette, then go to the Actions palette. Click 
the Neon Logo action and press the Play 
button. ImageReady will use the steps in 
your action to apply the layer style effects 
and the tweening commands to your text, 
turning it into a flickering neon logo. 


Animated logos 


Modifying existing actions 


Tweak your action's attributes, before applying 
it to new text to modify the finished animation 


tl] Once you've created an action it will 

apply the same layer style effects, and 

add the same number of frames, to any text 

it’s applied to. If you decide that there aren't 
enough frames in the final animation you Neon2.gif 
don’t need to create a new action from On this page we modified 
scratch, as you can edit individual steps in our Neon Logo action to add 
aaa . P 12 frames to the animated 
an existing action to change it. logo, instead of 4. Check out 
the more gently pulsing 
glow that the extra frames 
create by viewing the new 


tr] Let’s say you wanted a more gently logo on the cover disc. 
pulsing neon sign. To get your existing 

action to do the job go to the Actions 

palette. Click the arrow icon to see the list of 

steps that make up the action. Double-click 

on Tween to open the Tween dialog box, 

type in a larger number of Frames to Add, 

and click OK. The action will now add more 

frames to any text you apply it to. 


Layer styles 

As you've seen throughout 
this chapter, tweening layer 
style effects is a powerful 
way of adding movement to 
a logo without having to 
make the text itself move 
around the screen. Feel 

free to experiment with 
tweening, and with other 
layer styles, to create your 
own unique animations. 


Apose Pr FOR THE wes — Focus Guipe | 47 


48 


Chapter 3 


Animating for TV screens 


Constraints 

When you're designing for 
TV you have to take into 
account the constraints that 
the TV format places on 
your animation. TV screens 
display your work at a much 
lower resolution than a PC 
monitor, and this can lead 
to unforeseen problems. 
Check out the opposite page 
for more information. 


Photoshop CS2 enables you to create animated 
title sequences and logos for videos and DVDs 


| raditionally, ImageReady has 
always been used to create web 


content within Photoshop. However, 
Photoshop CS2 features direct 
access to the Animation palette from 
within the Photoshop interface, so 
users can create animations without 
switching to ImageReady. Unlike 
ImageReady CS2, Photoshop CS2 
allows you to export your animations 
and logos to video, making it the 
perfect application for creating cool 
captions, programme credits and 
logos for TV. To help you tailor your 
designs for TV, Photoshop includes 


TV PRESETS 


Photoshop CS2 boasts its own version of the 
Animation palette, enabling you to create 
animations for other media as well as the web 
a range of different-sized TV screen 
presets for you to choose from — see 
the box below for more details. 


Choose the correct-sized preset Photoshop document 


When you're using Photoshop CS2 to design an animated 
logo or title sequence for TV you have a variety of presets 
to choose from. To set up your Photoshop document at the 
appropriate size and resolution go to File > New. Click on 
the Preset menu, and look at the different options available 
to you. If you're based in the UK or Europe choose a PAL 


option; if you're designing for American TV then you'll need 
to select NTSC. Photoshop CS2 even has larger presets for 
the new HD (High Definition) format. All of the presets have 


a version with and without guides — the blue guides can be 


hidden by pressing Control + [7]. 
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Photoshop offers a variety of presets 
to help you design animations for 
formats such as Pal TV, and even HD 


Animated logos 


TV design constraints 


Before you create animation for TV, you need 
to know about (and avoid) potential problems 


( ompared to a PC monitor, a ae SS ee 


TV screen has a much lower 
resolution. This means some of the 
picture information that’s visible 
when you design a logo or graphic 
can disappear when viewed on a TV 
screen; fonts that are perfectly legible 
when you’re working a few inches 


from your monitor can be illegible eT 


Juddering 

Avoid using thin lines of 
less than 3 pixels in width in 
your logo designs, as these 
will judder when your 
animation is viewed ona 
TV; this is due to the 
interlaced scan lines that 


j ivi make up the video frames 
when viewed on TV across a living Due to the difference between TV and playing ona TV screen. 
room. There’s even a difference computer pixels, perfect circles can become 

hed ellipses, ruinii logo: 
between the shape of computer Seer ee ee eae hie? aeaeeee ae 
screen pixels and a TV screen’s this can cause perfect circles created 
pixels. Photoshop’s pixels are square, in Photoshop to become squashed 
while a TV’s pixels are rectangular; _ horizontally when viewed on video. 
DESIGNING EFFECTIVE TV ANIMATIONS 
Aspect ratio 
__ STEP BACK - While designing an animation to be viewed on TV, take jai eee pixels 
time to occasionally step back from your monitor, to see if you can still have a different aspect ratio, 
read text and captions from a distance. which simply means they 
have different shapes. 
] 1 yy . 4 PC pixels are perfectly 
__| FIDDLY FONTS - Don't use fiddly serif fonts that have delicate tapering squiarel while widescreen 
edges. These may be visible on a high-resolution PC monitor, but the anamorphic TV pixels have 
finer details will vanish when viewed on a lower-resolution TV screen, an aspect ratio of 2:1, 
Pe 3 a meaning that each pixel is 
making it hard for viewers to read your text. twice as wide as itis high. 


| SQUARE PIXELS - To avoid circles in your animations becoming 
squashed due to the difference between computer screen and TV 
screen pixels choose the ‘Pal D1/DV, Widescreen (with guides)’ preset. 
The pixel aspect ratio changes from Square (PC-shaped pixels) to 1.422 
(TV-shaped pixels). Photoshop scales the document's square pixels 
to match the non-square pixels of a TV screen. See the ‘Aspect ratio’ 
sidebar for further information. 
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Flying the flag 


Chapter 3 


Use Photoshop to create a rippling flag 
animation destined for the TV screen 


Good guides 

The blue guidelines around 
the edge of the Photoshop 
document are very useful, 
as they show you the safe 
area in which you can create 
your design. All TV screens 
are different, and it’s quite 
easy for the novice to place 
part of his logo near the 
edge of the screen, where 
it may be illegible. 


Flag.mov 

To see a video tutorial for 
this creative walkthrough, 
check out the movie on the 
cover disc. It will take you 
step by step through the 
tutorial, and explain more 
about using Photoshop to 
design animations for TV. 
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tC] Go to File > New. To create the 
animation for a standard widescreen 
TV go to the Preset menu and scroll down 
to select ‘PAL D1/DV Widescreen, 720 x 576 
(with guides)’ This will make your animation 
fit on a widescreen TV without becoming 
distorted (see the ‘Aspect ratio’ sidebar on 
previous page). Click OK. 


fr] Awarning dialog will appear telling you 
that Photoshop is using pixel aspect 
ratio correction; this enables you to see how 
the logo you create will look ona TV screen. 
Click OK. On the next page you'll turn off 
pixel aspect ratio correction to see a higher 
quality version of your logo, then turn the 
correction back on to see how the design will 
look on a lower-resolution widescreen TV. 


Create a new layer, click on the 
foreground and background colour 
swatches in the toolbox, and choose two 
different shades of blue to create the flag's 
background texture. Go to Filter > Render > 
Clouds to fill the new layer with a texture. 


To create a logo to adorn your flag 

select the Custom Shape Tool [U] from 
the toolbox. This tool draws filled vector 
shapes, and Photoshop has a huge library 
of shapes for you to browse through. Pop 
up to the options bar, and open the Custom 
Shape picker. Click on the arrow button to 
open the menu, and select Objects to geta 
new selection of shapes. 


Animated logos 


Create your components 


Use the Custom Shape Tool, text and layer 
styles to create a design for your rippling flag 


From the Custom Shape picker choose 
a symbol to adorn your flag - we're 
using Sun 1. Click on the foreground colour 
swatch in the toolbox to choose a colour for 
your shape. To draw a circular design such 
as our sun logo, hold down the [Shift] key 
as you draw to constrain the proportions. 
The shape will appear in a new layer. 


Select the Horizontal Type Tool [T], and 
type in the text for your logo - to unify 
the design we stuck to the same colour that 
we used for the symbol. To make the logo 
and symbol stand out a little more click on 
the ‘Add a layer style’ button at the foot of 
the Layers palette and choose Stroke. Select 
a 3-pixel wide complementary stroke colour 
for the symbol and text. 


Save the project as a layered 
Photoshop document, in case you need 
to alter the logo or text. Then hold down 
[Shift] and select the symbol, text and blue 
flag texture layers in the Layers palette. 
Press [Ctrl]/[Command]+[E] to merge the 
layers together, so that all the elements will 
ripple together like a real flag when we 
distort our design on the next page. 


Labels 

Each shape in the Custom 
Shape picker has a unique 
name. To discover what a 
particular shape is called 
hover your cursor over it-a 
tooltip-style yellow label will 
appear, showing the name 
of the selected shape. 


Video or web 

Although you're designing 
an animation to be viewed 
ona TV screen, you can 
adapt the basic design and 
animation steps featured in 
this walkthrough to create 
an animated flag GIF in 
ImageReady, You can also 


adapt the techniques 
described in this guide's 
The lines in the design look a little ImageReady walkthroughs 
jagged - this is because we're viewing to create animations for 
the image at TV screen resolution. To see the TVin Photoshop. 
design at a higher quality Photoshop setting 
go to Image > Pixel Aspect Ratio > Square. 
The whole image will compress inwards, but 
the edges of the text will look smoother. You 
can carry on designing in this pixel aspect 
ratio, or change back to PAL Widescreen. 
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Chapter 3 


Displacement maps 


PSD files 

On the next page you're 
going to use the greyscale 
displacement maps that 
you've created to make the 
logo billow like a flag in the 
wind. It’s crucial that you 
save the displacement maps 
as Photoshop documents 
(PSD files), otherwise the 
effect won't work. 


Save it 

Once you've customised a 
gradient by editing its colour 
Stops you can save it to use 
again, and even share it 
with other Photoshop users. 
In the Gradient Editor click 
on Save, and give your 
edited gradient aname 
(Flag.GRD for example). 

You can use the Load button 
to access saved gradients. 
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Edit the Gradient Tool to create displacement 
maps with which to animate your flag logo 
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fi] Press [D] to return the foreground and 
et background colours to their default 
black and white. Select the Gradient Tool 
[G]. Open the Gradient Editor, and select the 
Foreground to Background gradient. This 
gradient has two ‘colour stops’ below the 
Preview bar, one at either end, which create 
a gradient that goes from black to white. 


fz] Click below the gradient preview bar 

—__ to add two new colour stops. Place one 
at a location of 30% and the second one at 
60%. By default the two new stops will be 
black. Click on the stop at the 30% location, 
and use the Color Picker to change the colour 
to white. Click OK to apply the changes. 


Select the Linear Gradient option in 
the options bar. Create a new layer 
called Displacement 01, and draw a linear 
gradient from left to right across the new 
layer. Make the horizontal line that you 
draw with the Gradient Tool the same width 
as the text in your logo. 


Duplicate the Displacement01 layer 

and call it Displace02. Press [Ctrl]/ 
[Command]+[I] to invert the gradient. Go to 
File > Save As, and call it Displacement02.psd. 
In your main project hide the Displaceo2 
layer, so you can only see the Displace01 
layer. Save the file again as Displacement01. 
psd. You now have two displacement maps 
that you can use to distort the logo. 


Animated logos 


Animating your flag 


Use the displacement maps to distort the logo, 
and create a new frame in the Animation palette 


Hide the two gradient layers, as you no 

longer need them. Go to Layer > Flatten 
Layers; when asked if you want to discard 
hidden layers click OK. Your logo’s elements 
are now flattened into one layer. Double- 
click the layer thumbnail to unlock it, and 
label it Logo. Open the Animation palette 
in Photoshop, and duplicate the Logo layer 
in the Layers palette. 


Select the Logo copy layer. Go to Filter 
> Distort > Displace. In the Displace 
dialog use the default settings for Horizontal 
and Vertical Scale, and set Undefined Areas 
to Repeat Edge Pixels. Click OK. Navigate 
to the directory containing your gradient 
displacement maps. Select Displace01 «psd, 
and click Open; this will cause your Logo 
copy layer to distort like a billowing flag. 


fr] The first frame in the Animation palette 
~_| will change to show the distorted Logo 
copy layer. Click the ‘Duplicates current 
frame’ button. Hide the Logo copy layer in 
the Layers palette, and target the original 
undistorted Logo layer. Go to Filter > Distort 
> Displace, and select Displace02.psd - you 
now have two frames showing different 
distorted versions of the logo. 


ae Click the Play button in the Animation 
| palette. Set the frames to loop Forever. 
The two distorted frames will cycle, causing 
the logo to distort like a flag billowing in the 
wind. The animation will be too fast, so set 
the duration of each frame to 0.1 sec to slow 
the movement down. Et voila! A billowing 
flag that you can export to video (or re-size, 
and turn into an animated GIF). 


Export to video 

You can export your 
finished animation directly 
toa video recorder 

(or camcorder) attached to 
your PC. Go to File > Export 
> Send Video Preview to 
Device. Photoshop will play 
the looping flag animation: 
simply hit Record on your 
camcorder to capture the 
final animation. 


Smoother movement 
You now have all the skills 
you need to edit gradients 
and distort your logos. 

To create a smoother 
animation you can tweak 
the gradient’s colour stops 
to create additional 
displacement maps; you can 
then use these to distort 
new copies of the original 
logo layer to generate more 
frames for your animation. 
The more frames you have, 
the smoother the final 
movement will be. 
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ANIMATING 
EVERYDAY 
TECENOLOGY 


Develop your Photoshop and ImageReady 

O create stylised animated A , F 
radio waves skills further to create a variety of technologically 

nme §— Inspired animations for your home movies, 


in accurate increments 


[lpnates iene your website, and even for mobile phones 


radar beam effect 


In this chapter... 


Ouse tweening to animate 

a sniper’s gun sight 
ur lives are increasingly and ImageReady, we’re no longer 
dominated by, and dependant _ limited to viewing screen-based 
on, technology, and as a result we content that has been created by 
spend a great deal of time looking at _ someone else: we can create our own 
content and information on screens. _ imagery, and share it with others. 
Many of us spend hours in front 
of a computer screen at work, and Sharing content 
carry portable media players, PDAs _ As you’ve discovered in the previous 
and mobile phones around with us chapters, you can easily create your 
all day. When we get home we’re own animations to liven up your 
back on the computer playing games __ websites. Animations can also be 
or chatting via a webcam, or sitting _ also be added to your home videos 
in front of our widescreen TV and viewed on TV screens, thanks to 
watching programmes recorded Photoshop CS2’s incorporation of 
on our DVD or video recorder. the Animation palette directly into 
We're increasingly viewing the its interface (see pages 48 to 53). 
world through square eyes, but, You can even send your animated 
thanks to the power of Photoshop GIFs as media messages to your 


Page 56 Create the components 
for an animated podcast-style GIF 


Page 63 Create a texture for your 
radar screen using Photoshop filters 


friends’ mobile phones, so that they 
too can enjoy the results of your 
new-found animation skills. 


Digital identity 

Thanks to the proliferation of web 
forums and chat rooms, many of 

us have a whole set of ‘virtual’ 
acquaintances with whom we share 
thoughts and opinions, despite the 
fact that we’ve never met them in 
the flesh. It’s easy to feel anonymous 
on a forum or in a chat room, but 
ImageReady and Photoshop can 
help us reinforce our online identity 
by enabling us to create unique 
animated icons that we can attach 
to our name. An animated digital 


Page 59 Animate a layer’s opacity 
values to create radiating beams 


Page 64 Use ImageReady’s Numeric 
dialog box to animate the radar beam 


High-tech imagery 


Page 60 Use layer visibility to make 
aradar beam sweep around ascreen 


= 


Page 70 Use a variety of techniques 
to alter the components of a GIF 


‘label’ helps other forum users spot 
posts that we’ve written, and helps 
them locate us among the hundreds 
of other people online. Today’s 
animated icons (or avatars) work like 
medieval shields: they have a unique 
design to give us a sense of identity, 
and they can also say something 
about our personality. 

In this chapter we’ll discover some 
new Photoshop and ImageReady 
techniques that can help us to create 
animations inspired by technology. 
You'll then be able to adapt the skills 
you’ve picked up to create your own 
animated icons, enabling you to 
unleash your creativity, and enhance 
your on-screen presence. 

55 


Abose PHOTOSHOP FoR THE Wes — Focus GuiDe 


Chapter 4 


Podcast logos 


Podcast.gif 

Check out our animated 
podcast logo on your cover 
disc. Seeing the blue radio 
wave components being 
emitted as concentric rings 
of colour and fading out 
will help you get your head 
round the steps described in 
the following walkthrough. 
Simply drag the GIF into an 
open browser window to 
view it as an animation. 


Use Photoshop and ImageReady to create a 
podcasting logo with animated radio waves 


B ack in the 1980s affordable 
desktop publishing packages 
like PageMaker revolutionised the 
way people communicated; anyone 
with a PC and a printer could create 
their own newspaper or periodical, 
and distribute it. A similar revolution 
is underway today. Thanks to 
technological advances such as 
Broadband, and the ubiquity of MP3 
players, podcasting is becoming a 
growing phenomenon, and anyone 
with a microphone and a PC can 
broadcast their thoughts on any 
subject they choose. If you want to 


SYMBOLS AND SHAPES 


Draw attention to your site’s podcast links by 
creating an animated iPod-style logo that emits 
circular radio waves 

join in, you can draw attention to 
your own podcast by creating a 
suitably-themed animated GIF. 


Create an icon using Photoshop’s vector-based shape tools 


On page 50 we showed you how to use Photoshop's library 


of custom shapes to create a symbol for a billowing flag 


logo. Although there are many pre-designed shapes 


available, you may need to design your own symbols from 


scratch to create distinctive logos. Before we use 


ImageReady to add the animated radio waves to our 


podcasting logo we'll show you how to create a stylised 


iPod-style icon, to make it clear that the logo links to a 


podcast. You'll discover how to use Photoshop's vector 


shape tools to create the icon, and how to modify the 


Rectangle and Ellipse shapes to cut holes in it. 
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Modify Photoshop’s shape tools to 
create an stylised icon that forms the 
focal point of your podcasting logo 


High-tech imagery 


Create the icon 


Modify vector-based shapes to create the 
central iPod-style icon for your animation 


Create a new Photoshop document 

with a black background. Create a new 
layer called iPod, and set the foreground 
colour to white in the toolbox. Select the 
Rounded Rectangle Tool from the toolbox; 
to cycle through all the shape tools until you 
activate the Rounded Rectangle Tool press 
[Shift]+[U]. Draw an iPod-shaped rectangle 
on the iPod layer. 


fz] To change the way the tool behaves 
click on the ‘Subtract from shape area 
(-)’ button - the middle of the five buttons 
in the center of the options bar. The cursor 
will change to a crosshairs with a minus sign 
by it, indicating that the tool is ready to cut 
holes in your existing rectangular shape. 
Click and drag the cursor over the shape to 
cut out a screen display, as shown. 


fs] Select the Ellipse Tool from the shape 

~_} tools compartment, and use it to cut a 
circular hole in the body of the iPod shape to 
create a stylised control dial; to cut a perfect 
circle hold down the [Shift] key as you draw. 
To add a white hub to the dial click the ‘Add 
to shape area (+)’ button in the options bar, 
and draw a smaller filled vector circle. 


To give your icon more impact use 
layer styles to add a 3D effect to the 
design. Click on the ‘Add a layer style’ button 
at the foot of the Layers palette, and select 
the Inner Shadow option. Increase the 3D 
effect by entering a value of 8 pixels in the 
Distance field. Click OK to complete your 
stylised iPod icon. 


www.podcast.net 

To find out more about 
podcasting check out this 
comprehensive site — it may 
inspire you to create your 
own podcasts covering your 
favourite subjects. You'll 
even find podcasts on the 
subject of Photoshop — 
simply type Photoshop into 
the site’s search engine. 


Simple shapes 
ImageReady does have 
vector-based shape tools 
like the Rounded Rectangle 
tool, so you might consider 
using that package to draw 
the main body of the 

iPod shape. However, 
ImageReady lacks the 
additional options that 
enable you to cut holes in 
vector-based shapes; this is 
why we're using Photoshop's 
more advanced shape tools 
to draw our icon. 
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Animating radio waves 


Circle size 

In Step 6 we create the 

radio wave at its largest size. 
This allows us to scale down 
the wave in ImageReady to 
create smaller versions of 
the wave radiating from the 
iPod icon. By scaling down a 
large, high-quality graphic 
we lose no image quality; 

if we'd created a small radio 
wave, and then scaled it up, 
we'd have reduced the 
quality of the graphic. 


File size 

To keep the file size of the 
finished animation toa 
minimum we've created a 
very simple vector-based 
design for our podcast logo. 
You could add extra detail 
to your version by adding a 
Satin layer style to the radio 
waves ~ this will give them 
extra weight and depth, 
although it will increase the 
size of the finished GIF. 
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Take your Photoshop-designed components 
into ImageReady to add animated radio waves 


Go to Edit > Transform > Scale, and 
reduce the size of your iPod icon. Use 
the Move Tool [M] to place it in the centre of 
the image. Before switching to ImageReady, 
create a radio wave shape in Photoshop. 
Select the Elliptical Marquee Tool [MI], hold 
down [Shift] and draw a circle. To make the 
circle grow outwards from the centre of the 
icon’s dial hold down [Alt] as you draw. 


Create a new layer called Circle. Set the 

foreground colour to blue, and go to 
Edit > Stroke. In the Stroke dialog box set 
the Width to 20 pixels (or choose a different 
value if the stroke looks too thick or thin). 
Set the stroke’s Location option to Inside. 
Click OK to turn the circular marquee into a 
solid blue line. 


You’re now ready to animate the 
components. Click on the Edit in 
ImageReady icon at the bottom of the 
Photoshop toolbox. In ImageReady, open 
the Animation palette and click on the 
‘Duplicates current frame’ button. Duplicate 
the Circle layer in the layers palette by 
dragging it on to the ‘Create a new layer’ 
icon to create Circle copy. 


fs] Turn off the original Circle layer in the 
Layers palette to make it invisible in 
Frame 02. Target the Circle copy layer, and 
go to File > Transform > Numeric; this dialog 
enables you to scale down the Circle copy 
layer in increments. Choose a Scale 
Percentage of 80%, and click OK. The Circle 
copy layer will scale down by 80%, making 
it smaller in Frame 2 than it is in Frame 1. 
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Animating radio waves continued 


Add more radio waves, scale them, and 
make them appear to dissipate into thin air 


fo] Click the ‘Duplicates current frame’ 
button in the Animation palette to 
create Frame 3. Go to the Layers palette, 

and duplicate the Circle copy layer. Make the 
Circle copy layer invisible, target the Circle 
copy 2 layer, and go to Edit > Transform > 
Numeric. Scale down the Circle copy 2 layer: 
this will be the only circle layer that’s visible 
at Frame 3 of the animation. 


fio] Repeat the above technique to create 
a total of 8 frames and 8 circle layers. 
Play the animation. The blue circle will get 
smaller in each frame, radiating inwards 
towards the iPod icon. To make the circles 
radiate outwards, click on the arrow button 
in the Animation palette to access the 
palette menu, and choose Reverse Frames. 


Play the animation. The blue circles 

will now radiate outwards from the 
iPod icon’s control dial, symbolising the 
broadcasting of a podcast. To make the 
animation more sophisticated, and work 
more effectively as an infinite loop, you can 
edit the layers’ Opacity settings to cause the 
radio waves fade out as they get larger. 


fe] Select Frame 8 in the Animation 
palette. The original Circle layer will be 
the only layer visible in the Layers palette. 
Target the Circle layer in the Layers palette, 
and reduce its Opacity setting to 20%. 
Target Frame 7 and the Circle copy layer, 
and set the Circle copy layer’s Opacity to 
40%. Now the radio waves will fade away 

as they radiate outwards. 


Opacity 

When you adjust a layer’s 
opacity in Step 12 you can 
do so in three ways. You can 
click on the arrow next to 
the Opacity field in the 
Layers palette and use the 
slider, or type a numerical 
value into the field. 

To change a layer’s opacity 
using a keyboard shortcut, 
target the layer and press 
anumber key; the [2] key 
sets a layer’s opacity to 20%, 
and [4] sets the opacity to 
40% for example. 


The Numeric dialog 

In this walkthrough we 

used the Numeric dialog 
box to manually scale our 
circle layer in specific 
increments; this is the same 
technique employed by the 
pre-designed Zoom In and 
Zoom Out actions in 
ImageReady’s Actions 
palette (see pages 43-47). It’s 
good experience to use the 
Numeric transform option, 
as it’s the key to all sorts of 
different types of animation. 
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Transferable skills 


Radar.gif 

Check out the sweeping 
radar animation on the 
cover disc. Being able to 
make a layer’s content 
rotate smoothly is a very 
handy skill to have, and 
you'll be able to apply the 
technique to all sorts of 
animated content. 


Adapt the skills you learn from this guide to 
create unique animations for your own projects 


AX you work through this guide 
you'll create a variety of 
different animations. These creative 
projects are designed to help you 
develop your Photoshop skills, so 
that you can create and modify 
content for your own animations. 
The projects are also designed to 
get you using a variety of different 
ImageReady techniques. So far 
you’ve used tweening to create 
multiple frames of animation from 
two key frames (see page 22), used 
Actions to help you animate text 
quickly (see pages 43-47), and, on 


ANIMATING ROTATION 


the previous page, learned how 
to move a frame’s components in 
increments to create a smoothly 
scaling object. 

You can adapt all these techniques 
to create unique content for your 
own projects. In the next creative 
walkthrough we’ll show you how 
to create a sweeping radar beam 
by animating a layer’s rotation 
incrementally using ImageReady’s 
Numeric dialog box. You can apply 
the skills you’ll learn to make other 
objects rotate, such as an aeroplane 
propeller, or the wheels on a car. 


Create elements such as a radar beam using the Numeric dialog 


The Numeric dialog box is a vital tool for enabling us to 


create animated frames that can't be generated using the 


tweening technique. In the previous walkthrough you saw 


how to use the Numeric box’s Scale attribute to make a 


circle grow outwards from a central point in precise 


increments. This ability to transform a layer in numerical 


increments means that the changes we make to a layer’s 


components will create smooth and consistent movement, 


rather than being jerky and erratic. In the following 


walkthrough you'll discover how to use the Numeric dialog's 


Rotate attribute to create a radar screen. 
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Arotating layer causes the radar’s 
beam to sweep around in circles, 
illuminating small aircraft symbols 


Get smart 


High-tech imagery 


Give yourself more control over your designs by 
using Photoshop CS2's smart objects feature 


\ \ ] hen you’re designing the 
components of your 
animated GIFs, it’s worth learning 
how to use the smart objects feature 
that was introduced in Photoshop 
CS2. This is especially true if you 
need to scale particular layers. 
When you're using the Transform 
commands to scale a layer’s content 
down you press the [Return] key to 
apply the transformation; Photoshop 
then ‘forgets’ that the layer used to 
be bigger, and treats it as a small 
bitmap layer. If you decide to scale 
this layer up again, the quality of the 


layer’s content will degrade, because 
you can’t scale bitmaps up without 
losing some image data. 

Photoshop CS2’s smart object 
feature enables bitmap imagery to 
be handled in the same way as a 
vector object, meaning that you can 
scale it down, apply a transformation 
and then scale it up again later with 
no reduction in image quality. This 
is because the original properties of 
a smart object are saved, so you can 
rescale it at any time. Check out the 
box below to see how to turn a 
component into a smart object. 


CREATING SMART OBJECTS 


Turning an ordinary bitmap layer into a smart object 


In the following walkthrough we'll create the background 
of our radar screen by scaling down a stroked circle. If we 
scaled down an ordinary bitmap layer, then decided that 
we wanted to scale it up again later, it would deteriorate in 
quality. To turn a bitmap into a smart object target its layer, 
then go to Layer > Smart Object > Group into New Smart 
Object. The layer’s thumbnail in the Layers palette will 
change to indicate that the layer is a smart object. When 
you transform the layer a diagonal crossed line will appear 
over the object, to remind you that it’s ‘smart, and can be 
restored to its original size at any time. 


Photoshop only 

Smart objects give you 
more creative control over 
your designs in Photoshop. 
However, ImageReady 
doesn't recognise smart 
objects, so you must commit 
yourself to a final design in 
Photoshop before jumping 
to ImageReady to animate 
your components. 


You can scale a smart object back up 
to full size with no quality loss in the 
same way as a vector graphic 
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Create your components 


Extras 

Photoshop has plenty of 
tools to assist you in your 
graphic and animation 
design in its View > Extras 
menu. The blue guides used 
in this tutorial are extras 
that enable you to arrange 
your component layout 
accurately. Extras are there 
to help you with your 
design, but they won't 
appear in the final image. 


Info palette 

You can place guidelines 
on the screen with more 
accuracy by using the Info 
palette. Go to Window > 
Info (or press [F8]). The Info 
palette tells you exactly 
where you're placing your 
guides, so you can create 
very precise layouts. 
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Use Photoshop's tools and filters to create the 
background graphic for your radar screen 


fT] Go to File > New to create a square- 
shaped document. We made ours 20cm 
wide by 20cm high, with a resolution of 

144 pixels/inch. This file has a much larger 
resolution than the finished GIF will have, 
but we can reduce the resolution at a later 
date. Designing in a larger document helps 
maintain image quality, and makes it easier 
for us work on the finer details. 


Press [Ctrl]/[Command]+[R] to display 
the rulers. You can see from the rulers 
that the file is indeed 20x20cm in size. Click 
inside the vertical ruler on the left, and drag 
the cursor to the right until the blue guide 
rests at 2cm. Drag another guide to the 
4cm point. Continue placing guides at 2cm 
increments across the screen; these will help 
you create a balanced and uniform design. 


Drag guides from the horizontal ruler, 
and place them as shown to create a 
grid. Select the Paint Bucket Tool [G], and fill 
the background layer with black. Change 
the foreground color to orange, and createa 
new layer. Select the Elliptical Marquee Tool, 
and hold down [Shift]+[Alt]/[Option] to draw 
a perfect circle. Go to Edit > Stroke, and fill 
the inside of the circle with a 15-pixel line. 


Press [F] to edit in Full Screen Mode, 

to hide distracting on-screen elements. 
Duplicate the orange circle layer. Go to Edit 
> Transform > Scale. Press [Alt]/[Option] to 
make the circle scale from the centre, and 
hold [Shift] to keep the circle shape. Scale 
the circle down so that it fits into the next 
grid box as shown. Repeat the technique to 
create more circles for your radar screen. 
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Create your components 


Use filters to add more texture and detail to 
your graphic, and streamline your workflow 


5 | Hide the blue guides for the moment 
(see sidebar). When you create a 
graphic from multiple elements the Layers 
palette can get very crowded. Keep things 
looking less cluttered, and streamline your 
workflow, by holding [Shift] and clicking on 
the layers that make up the orange circles. 
Press [Ctrl]/[Command]+[G] to group the 
layers, and label the group Circles. 


a Create a new layer called Clouds, and 
place it beneath the Circle group layer. 
Press [D] to restore the foreground and 
background colours to black and white. 

Go to Filter > Render > Clouds to fill the 
Clouds layer with a fractal cloud pattern; 
this will form the basis of our radar screen’s 
background texture. 


Target the Clouds layer and go to 
Image > Adjustments > Hue/ 
Saturation. Tick the Colorize option. In the 
Hue/Saturation dialog box set the Hue to 
113 to turn the clouds green, and set the 
Saturation slider to 49 to make the colour 
more vivid. Click OK to apply the changes. 


fs] To give the Clouds layer a TV screen 
scan-line effect go to Filter > Texture > 
Grain. Set the Intensity to 40, Contrast to 53 
and Grain Type to Horizontal. This adds 
horizontal lines of texture to the Clouds 
layer, and makes the radar interface look 
more realistic. Click OK to apply the filter. 
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Hide and seek 

Extras such as guides are 
very handy for laying out 
components like the circles 
in your design. However, 
they can become intrusive 
when you're adding other 
elements to the image. Press 
[Ctrl/[Command]+fj] to 
hide any visible Extras. 

Use the same shortcut to 
make them visible again if 
you need access to them in 
the future. You can show 
and hide specific Extras by 
going to View > Show. 


Sets and groups 

In Photoshop CS you can 
place multiple layers into 
layer sets; this enables you 
to collapse them intoa 
single folder. Click in the 
box to the left of the layer 
thumbnail to link them, 
then choose Layer > New > 
Layer Set From Linked. 

In CS2 layer sets have been 
renamed layer groups, but 
they work in exactly the 
same way. 
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Creating the radar beam 


Layer masks 

Layer masks provide a 
powerful way of editing a 
layer’s content. If you paint 
black on a mask you make 
the corresponding layer’s 
pixels 100 transparent, and 
if you apply white to a mask 
you make the corresponding 
layer’s pixels 100 solid. Using 
agradient that moves from 
white, through grey, to black 
enables you to make a 
layer’s content fade out 
gradually, as in step 9. 


Round tripping 
Although we still have some 
components to create (such 
as little aircraft icons), we 
can switch to ImageReady 
and begin animating the 
rotating beam. We can jump 
back and forth between 
ImageReady and Photoshop 
at any time, which gives us 
greater creative control over 
the finished result. 
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Use the Gradient Tool to modify your cloud 
texture, and create a sweeping radar beam 


Target the Clouds layer, and click the 
‘Add a layer mask’ button at the foot of 
the Layers palette. Select the Gradient Tool. 
Open the Gradient picker and choose the 
Foreground to Background preset, and 
select Radial Gradient in the options bar. 
Select the layer mask, and draw a gradient 
from the centre out. This will make the cloud 
texture fade out at the edges of the screen. 


fo] Create a new layer called Beam, and 
place it above the Clouds layer, but 
below the Circles group. Edit > Fill the layer 
with 50% Grey. Press [Ctrl]/[Command]+[;] 
to turn on the Guides. Use the Rectangular 
Marquee [M] Tool to select a quarter of the 
Beam layer, and fill the selection with white. 


fa] Click on the Edit in ImageReady icon, 
and make sure the Animation palette 
is visible. Set the Beam layer’s blending 
mode to Overlay. The white part of the layer 
causes parts of the underlying Clouds layer 
to get brighter. Go to the Animation palette, 
and click on the ‘Duplicates current frame’ 
icon. Go to the Layers palette, and duplicate 
the Beam layer to create Beam copy. 


Go to Edit > Transform > Numeric, 

and change the Rotate Angle to 45%; 
this will rotate the Beam copy layer by 45 
degrees, causing the beam to begin its 
sweep around the screen. Click the eye icon 
to make the original Beam layer invisible, so 
that only the Beam copy layer is visible at 
Frame 2 of the animation. 
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Adding details 


Continue rotating the beam, and add extra 
graphic elements to your animated GIF 


In the Animation palette click the 
‘Duplicates current frame’ button 
again. Go to the Layers palette, and 
duplicate the Beam copy layer to create a 
new layer called Beam copy 2. Go to Edit > 
Transform > Numeric, and rotate Beam copy 
2 through 45 degrees. Hide the Beam copy 
layer, so that only Beam copy 2 is visible at 
Frame 3 of the animation. 


Repeat the layer duplication and 
rotation technique to add a total of 8 
frames and 8 Beam layers to your animation. 
Play the animation, and watch the radar 
beam sweep around in a looping 360 degree 
circle as the rotated beam copy layers turn 
on and off in sequence. Stop the animation, 
and rewind to the first frame. 


We can add more components to 

~| the animation by switching back to 
Photoshop. Click on the Custom Shape Tool, 
and open the Custom Shape picker from the 
options bar. Click on the triangular pop-up 
menu and select Symbols. Here you'll find 
a handy plane icon - add several planes to 
the design on separate layers. 


Switch back to ImageReady. Initially 
the planes will be visible throughout 
the animation. Turn off the plane layers for 
each frame and advance step by step through 
the sequence: when the beam overlaps a 
plane make sure the plane's layer is visible 
during that frame. Now the planes will only 
be visible as the beam sweeps over them. 
Check Radar.gif to see the finished result. 
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More actions 

Instead of repeatedly 

going to Edit > Transform > 
Numeric to rotate the beam 
layer through 45 degrees, 
you could create an action 
that does the job for you; 
see page 45 to discover 
how to create actions. You 
can even assign a keyboard 
shortcut to the action, and 
rotate each new beam layer 
with a single keystroke. 


File size 

For a less jerky, smoother 
rotation you can add extra 
frames, and make the 
copied layers rotate in 
smaller increments. 

Of course, the smaller the 
increments you use, the 
more frames you'll need to 
make an object rotate 
through 360 degrees to 
create a looping animation. 
We've kept our animation 
down to eight frames, to 
limit the size of the final GIF. 
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Create a scrolling background 


Create the illusion of movement by animating 
background and foreground elements 


Missile.psd 

To allow you to get on with 
animating the missile we've 
created the components 

for you. Check out the 
Photoshop document on the 
disc: you'll find the missile 
on one layer, and the clouds 
and exhaust flames on 
another layer. By tweening 
the cloud layers, and turning 
the exhaust flames on and 
off, you'll create an infinitely 
looping animated sequence 
in which the static missile 
layer appears to fly. 


C ast your mind back to the 
bouncing ball exercise in 
Chapter 2, where we showed you 
how to make the ball appear to move 
by creating two key frames in the 
Animation palette. In the first frame 
we placed the ball layer in the air, 
and in the second frame we moved 
the ball layer so that it rested on the 
ground. By tweening between these 
two key frames showing the ball in 
its start and end positions we were 
able to add several intermediate 
frames to make the ball layer 
physically move from point A to 
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point B, and this created the 
impression that the ball was falling. 
An alternative way to create the 
illusion of movement is to animate 
other objects in a scene, while 
keeping the main object static. In 
the walkthrough on the following 
page we’ll create the illusion of a 
flying missile by making foreground 
and background cloud layers move. 
This is a similar technique to the 
old cell animation trick of having 
a piece of art scrolling past in the 
background, while the main 
character runs on the spot. 


Here’s how we created the missile and clouds 


We drew the missile's body with the Rectangular Marquee 


Tool. We used the Polygonal Lasso Tool to create the nose 


cone, fins and exhaust, and all the sections were filled with 
grey. To add shading we used the Gradient Tool set to the 
Reflected Gradient option. The flame effect was drawn with 


the Freehand Lasso, coloured and faded using a Foreground 


to Transparent gradient. We used the Freehand Lasso to 


create cloud layers; a large background cloud and a smaller 


cloud behind the missile, plus a foreground cloud designed 


to pass in front of the missile. The clouds are all we need to 


create the illusion of the missile’s movement. 
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Three separate cloud layers (and 
seven frames of animation) are all we 
need to make the missile fly forever 
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Scrolling background 


Create the impression of speed by moving 
and tweening the different cloud layers 


ft Create your own missile and cloud file, 
or open Missile.psd from the cover disc. 
The Foreground cloud and Midground cloud 
layers have their components placed the 
right-hand side of the screen. Open the 
Animation palette, and click on the 
‘Duplicates current frame’ icon to create a 
second key frame. Select the Move Tool [V]. 


With Frame 2 targeted, click on the 

Foreground cloud layer to select it. 
Drag the cloud to the far left of the screen, 
so it nearly disappears off the edge of the 
visible area; this will make the foreground 
cloud cover the greatest distance, creating 
the illusion that it’s moving more quickly 
than the clouds in the background. 


Select the Midground cloud layer. Drag 
this cloud to the left of the screen, but 
make it travel less far than the foreground 
cloud; this will make the cloud appear to 
travel more slowly than the foreground 
cloud, as it will have less distance to cover 

in the same amount of frames. Leave the 
Background cloud layer as static component 
to add a sense of perspective and depth. 


With Frame 2 still targeted, select 

Tween With: Previous Frame, and add 5 
frames. Tick All layers, and click OK. Preview 
the Animation. The Foreground cloud 
appears to move across the missile at the 
fastest speed. The Midground cloud travels 
behind the missile, creating the illusion of 
3D space. Make the flame invisible in Frames 
2, 4and 6, so that it flickers on and off. 


PSDs and ImageReady 
In versions of Photoshop 
older than CS2 you have to 
opena file in Photoshop 
before you can take your 
PSD into ImageReady. If you 
have a copy of CS2 you can 
right-click ([Ctrl]+click) on 
a PSD, and choose Open 
With ImageReady from the 
pop-up menu ~ Photoshop 
doesn’t need to be open. 


Relative speed 

In our animation the virtual 
camera is travelling at the 
same speed as the missile, 
so the missile occupies the 
same position in the frame 
throughout; only the cloud 
layers give us a visual clue 
that the missile is moving. 
Objects further away look 
like they're travelling more 
slowly than objects nearer 
the camera, and this is 

why we keep the distant 
background cloud static, 
while the foreground cloud 
whizzes past the camera. 
This difference in cloud 
speed also gives the scene a 
sense of depth and realism. 
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Creating an ECG screen 


Create a high-tech animated interface by 
using masks to reveal the content of a layer 
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EK lectrical gizmos and gadgets 
do all sorts of different jobs, 


from playing our favourite tunes 
to monitoring our heart rate. Most 
electrical equipment is designed 
to communicate with us through 
an electronic interface that displays 
a variety of information in the shape 
of graphic and symbols, and we 
can use Photoshop’s filters and 
ImageReady’s animation tools to 
create all sorts of hi-tech interfaces 
with the minimum of effort. 

In the mini-walkthrough opposite 
we’ll show you how to create the 


Playing it straight 

Our heart rate graph was 
created by distorting a 
horizontal green line. To 
create a perfectly horizontal 
line select the Brush Tool [B). 
Click once to place the 

first point of the line at the 
left-hand side of the screen, 
then hold down [Shift] 

and click on a point at the 
opposite side of the screen; 
the Brush Tool will generate 
a straight line by connecting 
the two points. 
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To keep the wave relatively 


interface of an ECG machine as 

it monitors a heartbeat; the pulses 
of the heart are indicated by a 
scrolling graph. What initially 
appears to be a complex animation 
challenge is actually very simple, as 
the only moving component in the 
animation will be a tweened mask 
that repeatedly slides across screen, 
making it appear that regular heart 
beats are generating a graph. Once 
you’ve mastered the animated mask 
technique you can adapt it to create 
all sorts of hi-tech interfaces web 
and TV screen animations. 


To create a suitably 


simple, choose a low value 
for Number of Generators; a 


shaped ECG graph from 
your initially straight line 


higher number would create 
a graph indicating a faster 
heart rate. 


Go to Filter > Distort > 
Wave to open the Wave 
filter's dialog box. 


Set the foreground colour 
to a suitable green, and draw 
a straight horizontal using 

the Brush Tool. 


choose a Sine wave from 
the Type section. 


To create a wave with 
varying peaks and troughs, 
give the Minimum and 
Maximum wavelengths 
different values. 


To make the heart rate 
appear more erratic, choose 
different numerical values 
for the Minimum and 
Maximum amplitudes. 


Focus Guipe — A 


High-tech imagery 


Animating a mask 


Create a looping ECG-style graphic by 
animating a mask to wipe across the screen 


fe] In Photoshop create a file containing 
the green sine wave against a black 
background. You could add a coloured grid 
to make a more textured and detailed ECG 
interface, but keeping the animation simple 
and less detailed will keep the file size of the 
finished GIF small. Create a new layer called 
Mask, and place it above the sine wave layer. 
Edit > Fill the new layer with black, 
then click the Edit in ImageReady 

button. In ImageReady, open the Animation 
palette, and click the ‘Duplicates current 
frame’ button to create a second frame. With 
Frame 2 targeted in the Animation palette 


drag the black Mask layer all the way to the 
right, to reveal the sine wave layer. 


To make the Mask layer wipe from left 
to right, and reveal the green Wave 
layer beneath it, click on the Tween icon in 
the Animation palette. Select Tween With: 
Previous Frame, and add 5 frames to keep 
the final GIF’s size to a minimum. Click OK to 
create the tweened frames. Your animation 
will now consist of seven frames in total. 


qT] Preview the animation - the heart rate 
is far too fast for a healthy human! To 
slow down the pulse, hold [Shift] and click 
on the first and last frames to select all the 
frames in between. Go to the Frame delay 
pop-up of the first frame, and change it from 
No Delay to 0.1 frames per second. All the 
frames will change to have the same delay 
time, which will slow down the animation. 
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ECG.gif 

View our simple but 
effective version of the ECG 
animation by playing the 
animated GIF on the cover 
disc. You can use the 
animated wipe technique to 
create all sorts of similar 
animations, such as an 
audio waveform froma 
music player, or the reading 
ona seismograph. 


Smoother is bigger 

In step 3 we add five 
tweened frames to make 
the Mask layer wipe across 
to reveal the Wave layer 
beneath it; this creates 
ajerky but effective 
animation. To create a 
smoother wipe you'll need 
to add more tween frames, 
although having more 
frames will increase the file 
size of the finished GIF. 
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Chapter 4 


On target 


Shift it 

The Custom Shape Tool 
shares a compartment with 
five other tools, and all 
these tools share a single 
keyboard shortcut, which is 
[U]. Pressing [U] will access 
the last tool from the 
compartment that was 
used; to cycle through all 
the available tools, press 
[Shift}+[U]. 


Create an animated sniper’s sight with the 
help of Photoshop's extensive symbol library 


O ne interface that’s often seen 
in the world of movies and 
computer games is the high-tech 
gun sight; from to James Bond to 
Call of Duty, snipers and assassins 
use telescopic sights to get a clear 
shot at their enemies. We can use 
Photoshop’s library of vector-based 
symbols to create a gun sight 
animation, with a crosshairs that 
changes colour when the target has 
been selected. The moving figure 
icon will also change colour to 
indicate the dramatic moment when 
the trigger is about to be pulled; our 


CREATE THE COMPONENTS 


Use symbols to create a stylised high-tech 
gun sight, with flashing icons that change 
colour when the sight is on target 


GIF will finish with the figure 
flashing red and then vanishing, 
indicating a direct hit! 


for the Custom Shape Tool 
click on the Custom Shape 
picker in the options bar. 


Click and hold on this 


to access the Custom Shap 
tool, or press [Shift]+[U]. 


Use the shape called 


To select a specific shape 


compartment of the toolbox 


To access the shapes 


required for this project click 
here and select Symbols. 


e 


Choose the option to append 
the symbols to the list of 
current shapes. 


Create the outer ring of 
the target interface by 


drawing a circle with the 
Elliptical Marquee Tool, and 
Edit > Stroke the selection 
with green. 


Use the Pedestrian symbol 


Registration Target to create 
the target icon at the centre 
of the image. Create an 
orange and a green version 
of the target. 


for our sniper’s would-be 
victim. Create a blue version 
of the figure, then ared copy 
below it, and link them. 
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High-tech imagery 


Animating the elements 


Create key frames in ImageReady to make 
your figure move in and out of danger 


CC 


ft] Open your source file in Photoshop, 
and click the Edit in ImageReady icon. 
Make sure the Animation palette is visible. 
Target Frame 1, and make sure the blue and 
red figure layers are linked in the Layers 
palette. Select the Move Tool, and place the 
figure to the left of the target's centre, as 
shown. The linked red figure hidden on the 
layer below will also move to this position. 


Click the ‘Duplicates current frame’ 

button to create Frame 2. Now move 
the figure icon to the right of the interface. 
In CS2, as you drag the figure to the right a 
blue guideline will pop up to enable you to 
keep it horizontally aligned with the figure 
in Frame 1. If you don’t have this guide, hold 
down [Shift] to constrain the figure so it can 
only move horizontally. 


To make the figure move from its 
position in Frame 1 to the new position 
in Frame 2, click the Tween button at the 
bottom of the Layers palette. Set it to Tween 
With: Previous Frame. Add 6 new frames to 
the sequence, and click OK. 


Press [Y] to preview the animation. 

The figure will move from left to right, 
as if the telescopic sight is panning past him. 
Advance to the frame where the gun sight 
passes directly over the figure. To make the 
figure flash red at this particular frame, 
make the blue figure layer invisible by 
turning off its eye icon. Hide the green 
target icon as well, to indicate a target lock. 


Target.gif 

Before you animate your 
components, take a look at 
the finished GIF to see the 
subtle effects you can use to 
enhance your animation. 
For example, the target icon 
flashes red whenever the 
figure is in the sight, to 
indicate a target lock. 


Target.mov 

We'll take you step by step 
through the whole process 
of creating and animating 
our gun sight project's 
components in the training 
movie on the cover disc. This 
will help clarify all the steps 
and techniques involved. 
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Chapter 4 


Direct hit! 


Slow down the movement of the gun sight 
to enhance the drama of the animation 


Ready, aim, fire! 

By making the figure icon 
move less, and using more 
tweened frames to make it 
move, wecan change the 
pace of the animation in 
mid-sequence. This enables 
us to draw out the drama, 
and make the movement in 
the animation more realistic. 


\, 


www.gifs.net 

To get inspiration for your 
own creative GIFS, check 
out sites like the one listed 
above ~ it’s packed with 
animations on nearly every 
theme imaginable, from 
animals to entertainment. 
You can see a preview of 
each GIF, and there are 
hundreds to explore, 


Focus Guipe 


Select Frame 8 in the Animation 
palette. Click the ‘Duplicates current 
frame’ icon to create Frame 9. Use the Move 
Tool to drag the figure to the left, but don’t 
place him as far left as in frame 1; we want to 
create the effect of the gunman lining up his 
target. Use the Tween dialog to add 10 more 
frames to the sequence between Frame 8 
and 9; this will give you 19 frames in total. 


The extra tweened frames slow down 
the animation, making it look like the 
gunman is taking more care to get a bead 
on his victim. To add drama, make the figure 
and the crosshairs icon change colour again 
when the target moves across the figure. 


f7] Now select frame 19, and click the 
‘Duplicates current frame’ icon. Use the 
Move Tool to place the figure at the centre 
of the target. Add 10 more tweened frames 
between Frame 19 and Frame 20, to let the 
sniper finally get the target in his sights. 

At frame 30 hide the blue figure layer, so 
that the red figure is revealed, and make the 
crosshairs turn orange. 


fs] Play back the sequence. The movement 
of the gun sight slows down as it closes 
in on the target. Select Frame 30 in the 
Animation palette, and click the ‘Duplicates 
current frame’ icon. Make the red figure icon 
invisible, so that the figure vanishes once 
the gun sight has come to a halt, implying 
that the target has been eliminated. 


High-tech imagery 


Tinkering with time 


Fine-tune the timing of individual frames 
to take control of the unfolding narrative 


JPN DES We 


At this stage the frames are set to the 

default duration of No Delay; by editing 
the duration of specific frames we can add 
extra tension to the sequence. First select all 
the 31 frames in the Animation palette, and 
set their duration to 0.1 seconds. This will 
slow down the general frame rate of the GIF, 
so it’s not over in an instant. As the sequence 
has a distinct narrative, set looping to Once. 


fo] Select Frame 30. This is the last frame 
to show the figure before it vanishes, 
indicating that the victim has been shot. 
Change the duration of this frame to a delay 
of 2.0 seconds - this will create a dramatic 
pause before the gunman dispatches his 
victim. Once the figure has vanished change 
the crosshairs icon back to green, by making 
that layer visible for the final frame. 
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Address |B) C:\Documents and Settngs\ George Cans\iocal Settngs\Temo\imageReady\TargetPreview6!\Terget.hem Bo uw” &- 


Format: GIF 

Dimensions: 200w x 149h 

Size: 40.92K 

Settings: Selective, 256 Colors, 100% Diffusion Dither. 31 frames, Transparency on, No* 
‘Non-Interlaced, 00 Web Snap j 


<html> 

<head> 

|<title>Target</title> 

<meta http-equiv="Content-Type” content="text/html; charset=iso-8659 
</head> 


<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" 
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Preview 

You can preview the 
animation in ImageReady 
by clicking the Preview 
Document icon in the 
toolbox; however, you aren't 
seeing an optimised version 
of the GIF. You can get more 
idea of how the GIF will 
behave ina browser by 
clicking on the ‘Preview in 
iexplorer’ icon; this method 
will also tell you the file size. 


Go large 

Feel free to create your 
animated GIF at a larger 
resolution than the end 
result needs to be. Once 
you've worked out the 
movement and the timing 
of the GIF you can click on 
the Edit in Photoshop icon. 
In Photoshop you can crop 
the document to lose any 
unnecessary space around 
the edges, and go to Image 
> Image Size to reduce the 
GIF's width and height to 
something a bit more 
web-friendly. We shrunk our 
GIF to 200x149 pixels, which 
made it weigh in at 40.93K. 
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Chapter 


In this chapter... 


Oo Prepare source photos 
for animation 


Ocreatea dancing 
dog animation 


Oo Use groups to organise 
multiple layers 


Dladjust the timing of 
individual frames 


Oi create a classic 
stop-motion animation 


5 


FROM DOGS TO 
DALEKS: MAKING 


FIGURES 


MOVE 


Animators have been making characters move 
since the earliest days of the art. We'll show you 
how to use the ultra-modern tools of Photoshop 
and ImageReady to bring figures to life 


nimations are created by 

rapidly playing a series of still 
frames to achieve the illusion of a 
moving image. In theory you could 
draw hundreds of frames featuring 
a character moving, and then use 
ImageReady to animate them. 
That’s fine if you’re a talented artist, 
but most of us don’t have those 
particular skills. Fortunately, 
ImageReady and Photoshop have 
all the tools we need to create our 
own character animations. 


Stop motion 

Over the years creative people have 

used different techniques to produce 
their own character animations. Ray 


Harryhausen was a talented artist, 
but instead of drawing his characters 
he chose to bring model skeletons 
and dinosaurs to life by moving 
their limbs or heads in tiny 
increments, and snapping a single 
frame of film to record each change 
in movement. When the still frames 
were run through a projector the 
models appeared to move, and 
possess their own personality. 

The stop-motion techniques 
used by Harryhausen enabled him 
to bring a variety of legendary 
characters to life, such as the snake- 
haired medusa in Clash of the Titans. 
We’ll look at photographing and 
animating our own inanimate 


Page 76 Isolate a subject in a source 
photo using the Magnetic Lasso Tool 


Page 78 Arrange your components on 
layers to prepare them for animating 


j 
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Page 79 Use tweening and frame 
reversing to make a dog dance! 


Page 81 Use real-life objects as 
models for stop-motion animations 


objects, to create source frames that 
we can animate in ImageReady. 


Cut-out characters 

In the 1970s Terry Gilliam cut out 
figures from prints of classical 
paintings, and designed 2D 
characters that he could animate 
frame by frame. Gilliam created his 
characters with separate arms and 
legs, so that he could move their 
limbs independently while they lay 
on a rostrum under a film camera. 
Gilliam’s simple yet stylised 
animations became famous as an 
integral part of the TV show Monty 
Python's Flying Circus. We can 
adapt Gilliam’s simple but effective 


Page 83 Use a sequence of photos 
to create looping animated GIFs 


approach to animation to create 
our own moving characters using 
Photoshop and ImageReady. We’ll 
use Photoshop to cut out a source 
image of a dog, then place its legs 
and head on separate layers. We can 
then use ImageReady’s tweening 
powers to make the limbs and body 
move, so the dog appears to dance. 

Harryhausen and Gilliam created 
their characters using different 
techniques, and made them move 
without the need to draw a single 
frame. In this chapter well take 
inspiration from these animation 
legends, and use ImageReady’s and 
Photoshop’s strengths to create our 
own moving characters. 
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Page 86 Use the Liquify filter to add 
personality to inanimate objects 
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The dancing dog 


Before we can make our dog dance, we 
need to isolate him from his background 


76 


On the web 

Dancing animals are all 

the rage on the internet, and 
can be found strutting their 
stuffon various websites. 
You'll find photo-realistic 
dancing cats adorning 
e-cards, for example, having 
been brought to life using 
the same techniques 
demonstrated in this 
walkthrough. Having 
mastered the processes 
involved, you can use your 
own photos to get the 
family pooch performing! 


Masking shortcuts 
When modifying your 
selection marquee in Quick 
Mask mode, you can quickly 
switch the foreground 
colour between black and 
white by pressing [X]; this 
enables you to quickly add 
pixels to or subtract them 
from the selection. Press [D] 
to reset the foreground and 
background colours to the 
default black and white. 
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oT Open Dog01.jpg from the cover disc, 
|_| and select the Magnetic Lasso Tool [L]. 
As there's plenty of contrast between the 
dog and the background, leave the tool’s 
options set to their defaults. Click to place 
an anchor point on the edge of the dog, 
and draw around its outline. The lasso will 
automatically place anchor points around 


the pup to create a selection marquee. 


= To complete the selection click to place 
|< the last anchor point on the first. The 
selection won't be perfect, as the tool will 
have strayed occasionally and missed bits of 
fur; this isn’t a problem, due to the stylised, 
cut-out nature of the animation, but you 
can tidy things up a little by pressing [Q] 

to edit the selection in Quick Mask mode. 
The unselected areas will turn red. 


'"~ ) Select the Brush Tool [B]. Open the 
|_| Brush Preset picker in the options bar, 
and select a small soft-edged brush. To add 
bits of missed fur to the selection set the 
foreground colour to white - this will 
remove parts of the red mask, and expand 
the selected area. If you need to remove bits 
of carpet from the selection, use a black 
brush to deselect these areas. 


| | To see how the selection is shaping 
\ up, press [Q] again to leave Quick Mask 
mode. Once you're happy with the selection 
go to Layer > New > Layer via Copy. This will 
place the pup on a new layer in the Layers 
palette. You can now delete the unwanted 
Background layer, by dragging it to the 
trashcan icon at the foot of the palette. 


Edit the components 


Manipulate the source image in Photoshop 
to prepare it for animating in ImageReady 
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| Select the Freehand Lasso Tool and 
_—_| draw around the pup’s head and neck. 
Press [Ctrl]/[Command]+[X] to cut the 
selection, and then [Ctrl]/[Command]+[V] to 
paste the head on to a new layer. When you 
paste pixels Photoshop places them at the 
centre of the work area; use the Move Tool 
[V] to place the head above the body so it’s 
in the correct location. 


—, | Select the pup’s right hind leg using 
__| the Freehand Lasso. Cut and paste 
the limb so it’s on a new layer, and use the 
Move Tool to position it as shown. When 
you move the head or leg in ImageReady 
there may be noticeable gaps, due to the 
components being on separate transparent 
layers — to minimise these gaps select the 
Clone Stamp Tool [S]. 


'~) Go to the cut-out leg layer, and press 
|__| [Alt]/[Option] to sample part of the 
dog's hip. Spray the sampled fur to extend 
the leg pixels over the edge of the body 
layer to hide potential gaps between the leg 
and body. Do the same with the dog's neck, 
to hide gaps between the neck and head. 
Repeat steps 5 to 7 to place the pup’s right 
front leg on a new layer too. 


. | Label the layers Head, Upper Paw, 
\__| Lower Leg and Body. Duplicate the 
Upper Paw layer. On the copied paw layer 
select the end of the paw with the Freehand 
Lasso Tool [L]. Edit > Transform > Rotate the 
paw so it’s pointing, instead of flopping. 
Label this layer Pointing Paw. Hold down 
[Shift] and select all the layers, then press 
[Ctrl]/[Command]+[G] to group them. 


Groups and sets 

If you use Photoshop CS 
you can place multiple 
layers into folders called 
layer sets; these are simply 
folders in the layers palette 
in which you can store 
grouped layers. In CS2 layer 
sets were replaced by 
groups. Groups are great 
ways to control multiple 
layers, as you'll see on the 
following page. 


Out of bounds 

If you're using Photoshop 
C52 you can get amuch 
better look at the contents 
ofa layer thumbnail. 

Click on the arrow icon at 
the top-right of the Layers 
palette to open the palette 
menu. Select Palette 
Options, and in the dialog 
click on the Layer Bounds 
option in the Thumbnail 
Contents section. This will 
make the layer thumbnails 
show only visible pixels, 
giving you a close-up view of 
a paw or head, for example. 
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Let’s dance! 


We can get our disco dog to strut her stuff 
by changing the visibility of specific layers 
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Shrink it 

As this project develops 
you'll end up with quite a 
few layers - you'll make the 
dog appear to move by 
turning specific layers and 
groups on and off. If your 
computer doesn't have 
enough RAM it may start 
to chug, especially when 
shifting whole groups 
around. Feel free to go to 
Image > Image Size and 
reduce the size of the file; 
you'll need to shrink it 
later anyway to create 

a suitably sized GIF. 


Arrow keys 

You can use the Move Tool 
instep 9 to position the 
duplicated group of layers 
so that the horizontally 
flipped components overlap 
the original group. Fine-tune 
the final position of the 
duplicated group by using 
the left or right arrow keys 
to move the group’s layers 
pixel by pixel. 
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©) Click the Edit in ImageReady icon. 

Drag the Group 1 folder (or layer set) 
on to the ‘Create a new layer’ button at the 
foot of the Layers palette to createa 
duplicate group. Target the Group 1 copy 
layer, and go to Edit > Transform > Flip 
Horizontal. Use the Move Tool to make the 
transformed group's components overlap 
the original dog, as shown. 


“~... | Re-label Group 1 as‘Look Right; and 


___ re-label Group 1 copy as ‘Look Left’. 
Target Frame 1 in the Animation palette. 
Make the Look Left group invisible at Frame 
1 by clicking the eye icon in the Layers 
palette. Open the Look Right group’s folder 
in the Layers palette by clicking on the 
triangle icon next to it. Turn off the Pointing 
Paw layer, so that it’s not visible at Frame 1. 


,, | Click the‘Duplicates current frame’ 

|" icon. In the Layers palette make the 
Pointing Paw layer visible at Frame 2, and 
hide the floppy Upper Paw layer. Duplicate 
Frame 2 to create Frame 3; hide the Pointing 
Paw and reveal the Upper Paw. Duplicate 
Frame 3 to create Frame 4; show the 
Pointing Paw and hide the Upper Paw layer. 
Play the animation - the dog will tap her paw. 


Target frame 4 and click the ‘Duplicates 
__.. current frame icon’ Hide the Look Right 
group and reveal the Look Left group; the 
dog will flip to face the opposite way. Open 
the Look Left group, and make the Pointing 
Paw layer visible. Duplicate the current frame 
and make the floppy Upper Paw visible 
while hiding the Pointing Paw layer. Create 
two more frames featuring alternating paws. 


Extra moves 


Get the pooch toe-tapping and paw-pointing 
to the rhythm by using tweening and cuts 


3 | We could keep the animation simple, 
and make the dog’s moves loop back 
and forth over eight frames. However, as our 

dog is trying to out-dance John Travolta, 
we'll add some variety. [Shift]+click to select 
the eight frames in the Animation palette, 
and click the ‘Duplicates current frame’ icon. 
You'll now have 16 frames that make the dog 
go through her opening dance moves twice. 


i Duplicate Frame 16. At Frame 17 target 


| | the Lower Leg layer in the Look Left 
group. Use the Move Tool to drag it upwards 
a short distance. You could make the leg 
move upwards over a single frame, but for 

a smoother movement click the Tween icon. 
Choose Tween With: Previous Frame and add 
2 frames. The leg will move upwards more 
smoothly from frame 16 to Frame 19. 


a To get the dog to tap her foot twice 
___. [Shift]+click to select frames 16-19. 
Click the ‘Duplicates current frame’ icon; this 
will create frames 20-23. Select these last 
four frames, open the Animation palette 
menu and choose Reverse Frames. This will 
make the foot move from the raised position 
back to its starting point. To get the foot to 
tap again select and duplicate frames 17-23. 


Fol Feel free to repeat any of the previous 
| techniques to add more frames to the 
sequence. You can add or modify frames 

to make the paw point, and the foot tap, 
whenever you like. You could even duplicate 
the dog's head in either of the two groups, 
and Edit> Transform > Flip the copied head 
to make it look left or right, regardless of 
which way the body is pointing. 


DiscoDog.gif 

See the finished animation 
by dragging the GIF from 
the cover disc into an open 
browser window (or choose 
File > Open from your 
browser menu). We've 
added a couple more 

head moves to our final 
animation, to make the 
dog look left and then right 
as she points her paw. 


Set the tempo 

Finish off the animation by 
slowing down the speed at 
which it plays. Initially the 
frames will default to 

No Delay, making the 

pup dance at high speed. 
We made our dog start off 
with some paw pointing at 
0.5 frames per second, 
before speeding up to 0.1 
frames per second for the 
rest of her dance. Now all 
you have to dois finda 
suitable piece of music, and 
embed a link to an audio file 
in your web page, to give 
your prancing pooch 
something to dance to. 
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Stop motion 


www.stopmotion 
animation.com 

This site is full of articles on 
the art of stop-motion — if 
you're new to the concept 
check out the very useful 
Newbie Corner to get up 

to speed. The site looks 

at traditional film-based 
stop-motion, and also 
covers using computers to 
create stop-motion movies. 
There are also practical tips 
‘on building puppets with 
armatures that will enable 
you to pose them. 


Bring life to poseable toys and models using 
the stop-motion animation technique 


ay Harryhausen turned his 


fully poseable monster models 


into living creatures that stalked the 
silver screen using the stop-motion 
technique. We can adapt this 
process, and give it a 21st century 
spin, thanks to Photoshop’s and 
ImageReady’s tools. We'll kick off 
by showing you how to capture the 
source frames for your animation 
by pointing a digital stills camera at 
an object (rather than a film camera, 
as Harryhausen used). We’ll then 
demonstrate how to modify those 
digital stills in Photoshop to turn 


SET UP AND SHOOT 


Create a stylised hand-drawn animated GIF 
by filming a real-life object and applying 
filters to each frame 

them into stylised art, before 
running them in sequence to create 
an animation using ImageReady. 


| legs or other appendages 

in tiny increments, and take 
a shot after each movement. 
When you run the shots | 
| together in ImageReady the 

| object will appear to move. | 


Place your digital camera 
| onatripod, so that nothing 
| moves in the scene except 


for the model. 
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eu Move your model’sarms, | 


Set your camera's iris to 


manual, so that the exposure 
doesn't vary from shot to 
shot. This will ensure even 
light levels in each of your 
animation’s frames. 


| 


| To avoid moving the & 


camera even slightly set it 


to self-timer. If possible, use 
| aremote control to trigger 
|__| each shot. 
= 


An-i-mate! 


Open a series of source photos in Photoshop, 
and stylise them using the Glowing Edges filter 


Open the file StopMotionSource.psd; 
it features five layers showing our 
posed Dalek model in different positions. 
To add a sci-fi effect to the source images 
go to Filter > Stylize > Glowing Edges. Set 
Edge Width to 4, Edge Brightness to 8 and 
Smoothness to 7. Apply this filter to every 
layer by targeting each one in turn and 
pressing [Ctrl]/[Command]+[F]). 


| Click the Edit in ImageReady button. 
| Frame 1 will automatically be targeted 
in the Animation palette. Hide all the layers 
in the Layers palette apart from 01. 
Duplicate Frame 1 to create Frame 2, and 
make layer 02 visible. Duplicate Frame 2 to 
create Frame 3, and reveal layer 03. Repeat 
this process until you have five frames 
showing the content of each layer. 


|| There aren't enough frames to get 

|__| the toy to move smoothly as a looping 
animation. Once the toy rotates at Frame 5 
the animation jumps to Frame 1, making the 
toy abruptly point in the opposite direction. 
To create a smoothly looping sequence 
select Frames 1-5 by [Shift]+clicking them. 
Click‘Duplicates current frame’ to create 
another 5 frames. 


fa] Open the palette menu and choose 
Reverse Frames — now the toy will 
rotate back and forth. Test the timing of the 
animation. The toy will move manically back 
and forth at too fast a speed. [Shift]+click to 
select all the frames, then set the time to 0.2 
of a second - this will slow the toy’s speed 
down alittle. You can see our finished GIF 
on the CD - Look for Stopmotion.gif. 


Frames and file size 
The changes between each 
frame in our animation are 

quite large, which could 

lead to jerky movement. 

We could have shot more 
frames, and moved our 
model in smaller increments 
to get a smoother movie, 
but this would have created 
a larger GIF that would take 
longer to download. 


Keep it simple 

To reduce the file size of the 
animated GIF still further, 
we simplified the detail in 
the photographed source 
layers by applying the 
Glowing Edges filter in step 1. 
This meant ImageReady 
had less information to 
include in the final GIF, 
enabling us to createa 
faster-downloading, more 
cartoon-like animation. 
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Animating 


reality 


Rapid fire 

Most digital SLR cameras 
have a rapid shoot setting, 
enabling them to take 
several photos in quick 
succession; some compact 
digital cameras also have 
this option. In general you're 
limited to two or three 
frames per second; this 
restricts you to capturing 
and animating short 
sequences, like the instructor 
operating the exercise 
machine in our example. 


Adapt the principles of stop-motion to create 
animated mini-movies from photographs 
he stop-motion technique that 


F was made famous by Ray 
Harryhausen is a great way of 
bringing life to inanimate objects, 
as we demonstrated in the previous 
walkthrough. Thanks to the rapid 
shoot feature on many digital 
cameras (see sidebar) we can capture 
the movement of real people and 
objects in a series of consecutive 
frames, making it easy to create an 
animated GIF that looks like video. 
To keep the file size down to a 
minimum you should restrict your 
GIF to showing a short sequence — 


Use your camera's rapid-fire mode to capture 
a short burst of action that you can turn into 
an animated GIF 

in our example a trainer at a gym 
demonstrates the correct way to use 
a particular exercise machine. 


SHOOT AND PREPARE YOUR SOURCE FILE 


will stop the background 
from moving, and enable 
you to focus on the action. 


the cover disc—it contains 


to the resting position. 
Eat Lae 


a 


When you're animating 


| Photos, remove unnecessary 
| information to keep the final 
| GIF small. Delete layers 5 to 7, 


as we can create the same 
movement by reversing 

| layers 1 to 4 later. 

Le _ 
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- As before, when shooting 
your scene use a tripod; this 


Open GymSource.psd from 


seven layers that show the 
instructor's legs extending | 
outwards, and then returning | 
| 

af 


| Again, set the camera's | 
to manual when shooting 
source material to ensure 

consistent light levels. | 


| Set the camera to manual E 


focus, and focus it on the 

| main subject; this will stop 

| the camera changing focus 
during the animation. 


Use the Crop Tool [C] to 
remove parts of the scene 
that don’t contain any 

| valuable information; we're 

| | only interested in the moving 
| 7 "|. parts of the scene. 


HOP FOR THE Wea, 


Creating the 


movement 


Take your source files into ImageReady to 
turn your action stills into a moving GIF 


j | Once you've cropped the source image 
_ in Photoshop, and deleted layers 5 to 7, 
click the Edit in ImageReady button. If it’s 
not visible, choose Window > Animation to 
open the Animation palette. Turn off the 
visibility of layers 2 to 4, so that only Layer 
01 is visible at Frame 1. 


) 5 | Click the ‘Duplicates current frame’ 
~_ button at the bottom of the Animation 

palette to create Frame 2. Go to the Layers 
palette, and make Layer 2 the visible layer 
for that frame. Turn on Frame 2. Play the 
animation, and the subject will move his 
legs rapidly up and down as the sequence 
loops between the two frames. 


| Duplicate Frame 2 to create Frame 3. 
___. Make Layer 3 visible at Frame 3. Repeat 
the process to create a fourth frame showing 
Layer 4. Play the animation, and the subject 
will raise his legs up over the four frames. 
The sequence will then jump abruptly back 
to Frame 1, causing his legs to move from 
being fully extended to the resting position 
in a single frame. 


al . | To get the subject's legs to smoothly 

| “| return from the extended position to 
a resting position, [Shift]+click to select 
Frames 1 to 4. Click the ‘Duplicates current 
frame’ button to create frames 5 to 8; these 
new frames will be automatically selected 
in the Animation palette. Go to the palette 
menu, and choose Reverse Frames to make 
the legs extend and retract smoothly. 


Aose PHO 


LiveAction.gif 

Check out the animated 
GIF on the cover disc to see 
the trainer demonstrating 
the exercise machine. 
Although we only used four 
different source images we 
can extend the action by 
duplicating and reversing 
the order of the copied 
frames; this helps reduce the 
size of the finished GIF. 


Timing 

Test the finished animation 
by clicking on the ‘Preview 
iniexplorer’ icon; as we're 
used to seeing human 
movement we'll soon be 
able to tell whether or not 
the animation is moving at 
arealistic speed. To adjust 
the speed, select all the 
Frames in the Animation 
palette, and set them to 

a duration of 0.5 sec. 
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Digital manipulation 


Car.tif 

You can find the car source 
photo that we shot for our 
walkthrough on the cover 
disc. It was shot directly 
from the front to make it 
easier to distort the radiator, 
and make the car ‘smile; 
using the Liquify filter. 


Use Photoshop's pixel-pushing tools to add 
character to photos of inanimate objects 


S o far in this chapter we’ve 
looked at adapting traditional 


animation techniques to create 
character animations. We created our 
dancing disco dog by chopping up 
a source photo Terry Gilliam-style, 
and moving the components around 
as if they were lying flat under a 
rostrum camera. We adapted 

Ray Harryhausen’s stop-motion 
technique, using ImageReady to 
animate an object that had been 
photographed in different positions, 
and you also discovered how to 
shoot, prepare and animate a series 


of photographs to turn them into a 
sequence showing movement. 

Since Photoshop is the most 
powerful image-editing tool on the 
planet, you can also use its amazing 
tools to manipulate source photos 
in whole new ways to give life and 
personality to inanimate objects. 

In the following walkthrough we 
demonstrate how you can use the 
Liquify filter to create a series of 
images that will enable you to make 
a car smile and wink, then use 
ImageReady to turn these edited 
images into an animation. 


A successful animation is dependant on the right source image 


We decided to animate a car because many people invest 


their cars with a personality; some of us even name our cars, 


and feel unusually sad when we have to sell them. Cars also 


make a good subject for a character animation because it’s 


easy to anthropomorphize them; a car's two headlights can 


resemble two eyes, and the radiator can often be adapted 


to take the place of a mouth. ‘Living’ cars are a popular 


movie theme, from Herbie and Chitty Chitty Bang Bang to 


the homicidal Christine in the John Carpenter movie of the 


same name. Photograph your (hopefully benign) car from 


the front, so you can manipulate its key features easily, 
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Headlights and a radiator grill 
provide all the visual cues that we 
need to add personality to this car 


Liquid metal 


Use the Liquify filter to prepare your car 
source images for animation in ImageReady 


‘~~ | Open Car.jpg from the cover disc. 

___. Double-click the Background layer 
thumbnail, and label it 01. Select the 
Rectangular Marquee Tool [M], and draw a 
rectangle around the car’s radiator. Go to 
Layer > New > Layer via Copy to place the 
selection on a new layer. Label the copied 
layer 02. With the 02 layer targeted in the 
Layers palette go to Filter > Liquify. 


'- | In the Liquify interface select the 

|__| Forward Warp Tool [W]. In the Tool 
Options section set Brush Size to 158, Brush 
Density to 30 and Brush Pressure to 11. 
Stroke the brush upwards a few times on 
the left of the radiator, and do the same 

on the right. Click on the Save Mesh option, 
and save the mesh as CarMesh01. Click OK 
to apply the changes. 


'*~”) Duplicate the filtered 02 layer and label 
|_-_ the copied layer 03. Target the 03 layer 
thumbnail. Go to Filter > Liquify, click Load 
Mesh, and select the saved CarMesh071 file. 
This will apply the same Forward Warp 
strokes to the 03 layer, causing the radiator’s 
corners to move a similar amount of pixels. 
Re-applying these settings enables you to 
make the car‘smile’ in smooth increments. 


| Repeat the process one more time to 
=x create a fourth smiling layer labelled 
04. These four frames will be enough to 
create the illusion of a smiling car, although 
you could repeat the above steps and create 
more frames for a smoother sequence. We'll 
use tweening in ImageReady to create a 
smooth transition between our four layers. 


Web or TV 

The walkthroughs in this 
Focus Guide tend to cover 
web animation techniques 
using ImageReady, 
although, as you'll see from 
pages 48 and 49, you can 
also animate content for 
TV and DVD. If you have 
C52 then you can adapt 
any of the ImageReady 
walkthroughs in this book, 
including this one, to create 
animated content for TV. 


Less is more 

When we use the Forward 
Warp Tool to push pixels 
around in step 2, we set the 
brush to low Pressure and 
Density settings; this 
enables us to use several 
gentle brush strokes to 
gradually distort our image's 
pixels, which allows us to 
create a more subtle effect. 
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In the wink of an eye 


Adding character 

You can adapt the 
techniques demonstrated 
on this page to bring other 
inanimate objects to life. 
Suitable candidates for 
the Liquify filter treatment 
include objects such as 
traditional red letter boxes. 
The letter slit could be 
liquified to create a smiling 
or pouting mouth, and 
this type of animation 
could be used for a GIF 
that opens a blank email 
window when clicked on. 


Tidy up 

Once you've used the Clone 
Stamp to hide unwanted 
pixels in step 8, tidy up other 
areas using the Healing 
Brush Tool [J]. This tool is 
particularly effective for 
extending areas that have 
vague shapes and colours in 
them, such as the graduated 
reflections on the car's 
bonnet, for example. 
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Use the Liquify filter's Pucker Tool and the Clone 
Stamp Tool to create a winking headlight 


' ~ | Target the original background layer 


\__ (01), and use the Freehand Lasso Tool 
to draw a selection around the car's right 
headlight. Go to Layer > New > Layer via 
Copy. Place the new layer above all the other 
layers in the Layers palette, and label it Eye. 


Go to Filter > Liquify, and use the 
\___. Pucker Tool to make the headlight 
‘wink’ by distorting it. Set the Brush Size 
to around 450, and Brush Density to 30. 
Click several times; the tool will make the 
pixels distort like a liquid being sucked 
down a plughole, enabling you to make the 
headlight’s metal and plastic move in an 
organic fashion. Click OK to apply the filter. 


The edges around the distorted Eye 
ee. layer won’t match up with the 
corresponding details on the background 
layer, so you need to make them blend. 
Target the Eye layer thumbnail in the Layers 
palette, and select the Clone Stamp Tool [S]. 
In the options bar tick the Aligned and Use 
All Layers options. 


Hold down [Alt]/[Option], and click to 

sample a feature from the background 
layer (such as a curved line or a reflection). 
Click to spray the sampled pixels over any 
obvious edges around the liquified headlight. 
Also sample parts of the headlight, and 
extend these over background details that 
don’t blend effectively with the Eye layer. 


It’s alive! 


Now we can use lmageReady’s animation 
tools to bring our edited source photos to life 


To turn your static Photoshop layers 
___| into a moving animation, click the 
Edit in ImageReady button. Frame 1 will 
automatically be targeted in the Animation 
palette. Go to the Layers palette, and turn 
off all the layers apart from layer 01. In the 
Animation palette click on the ‘Duplicates 
current frame’ button. 


“| Click the eye icon next to layer 02 to 
| make that layer visible. The corners 
of the car’s radiator ‘mouth’ will begin to 
lift. To make the transition between the two 
frames smoother target Frame 2. Click on 
the Tween button and select Tween With: 
Previous Frame. Add 2 more frames. Play the 
animation, and the movement of the mouth 
will be more gradual. 


z 2 | Target Frame 4 in the Animation 

al palette and click the ‘Duplicates current 
frame’ button. Make layer 03 visible in the 
Layers palette. Use the tweening technique 
to add two more frames between Frame 04 
and Frame 05. Repeat this process to create 
tweened frames that blend the content of 
layers 03 and 04 together; this will bring the 
car's radiator to a full smiling position. 


| Target Frame 10, and click the 

|__| ‘Duplicates current frame’ button to 
create Frame 11. At Frame 11 make the 
liquified Eye layer visible. Create another 
frame, and turn the Eye layer off. Play the 
animation: the car will‘smile’ then ‘wink’ its 
headlamp. Go to Image > Image Size, and 
change the Percentage to 30%. Go to Save 
Optimized to create an animated GIF. 


Tweening 

Tweening between layers 
that are very slightly 
different helps create a 
smooth transition from one 
frame to the next. Ifwe 
tweened between layers 
with a greater difference in 
the position of their pixels 
(from layer 01 to layer 04 
for example), the viewer 
would be more likely to 
notice that the effect was 
created by dissolving from 
‘one frame to another, and 
the tweened frames would 
be less effective. 


Tinker with time 

Unlike many of the 
animations in this guide, 
the car animation is not 
designed to loop. Go to the 
Looping options at the 
bottom of the Layers palette 
and select Once, so that 
when the animation has 
played through it will stop. 
To increase the duration 
[Shift]+click to select all the 
Frames, and set their 
duration to 0.1 sec. Select 
the winking frame (Frame 
11), and set its duration to 

1 sec to emphasise the wink. 
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WHIPPING UP 
A STORM IN 
IMAGEREADY 


We can use Photoshop and ImageReady to 
create eye-catching animations that mimic 
dramatic natural phenomena such as rain, 
lightning, and even a shimmering heat haze 


In this chapter... 


Ouse filters to add a heat 
haze effect to photo 


Dluse selection tools 
to replace skies 


O create multi-layered 
animations 


Ci combine mixes and cuts 


hroughout history creative 

people have looked to nature 
as a source of inspiration, regardless 
of their chosen artistic medium. 
Primitive humans’ relationship with 
the animals that they hunted was a 
matter of life and death, and they 
recorded this important relationship 
by daubing images of their prey 
on cave walls. Many of history’s 
respected painters created their 
most enduringly popular works by 
capturing aspects of the natural 
world on canvas. The artist Joseph 
Turner supposedly lashed himself to 
a ship’s mast during a storm to get 
reference material for his creative 
work; this dedicated act of research 


led to him paint Snowstorm, which 
featured an impressionistic and 
chaotic arrangement of paint strokes 
designed to evoke a ship being 
dominated by a stormy sea. 


Inspired by nature 

The idea of using nature as a 
source of inspiration was embraced 
enthusiastically by the artists and 
writers of the Romantic movement, 
who painted the countryside’s 
ever-changing weather and lighting 
conditions, and wrote poetry about 
their relationship with the natural 
world. William Wordsworth’s poem 
Daffodils, in which he encounters a 
“host of golden daffodils’ by a lake, 


Page 91 Prepare the source images 
for a shimmering heat haze animation 


Page 95 Use filters and image 
adjustments to create lightning bolts 


is one of the best-known examples 
of such naturally-inspired work. 

The legacy of the Romantics has 
been continued by today’s 
moviemakers, who use nature to 
underpin the dramatic content of a 
film’s narrative: a confrontation with 
a killer is more exciting if it’s set 

in a thunderstorm at the movie’s 
climax, while heroes in westerns 
often ride off into a beautiful sunset, 
having rid a town of bad guys. 


Digital deluge 

Technology may have changed since 
Turner’s and Wordsworth’s day, but 
the natural world remains a fantastic 
source of inspiration for the creative 


Page 93 Create dramatic clouds using 
Photoshop's filters and Transform tools 


Page 96 Create dissolves that make 
lightning flare up realistically 


Animating nature 


Page 94 Use layer bending modes to 
animate clouds illuminated by lightning 


Page 97 Combine a variety of filters 
to produce layers of animated rain 


work of digital artists. We can use 
Photoshop to modify photos taken 
on an ordinary day, and replace 
mundane skies with more dramatic 
ones for example. And, thanks to 
ImageReady, we can go one step 
further, and add animated weather 
effects to our images to create 
a scene in which rains falls, and 
lightning does indeed strike twice. 
In this chapter we'll push the 
boundaries of what ImageReady is 
designed to do to create animated 
sequences that feature both cutting 
and dissolving elements, such as the 
flashes of lightning flaring up inside 
clouds on page 94. Prepare to take 
control over the elements... 
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Animating a heat haze 


Road.tif 

You'll find the source photo 
we used for our heat haze 
animation on the cover 
disc, As well as looking like 
a suitable location to find 
a heat haze the scene has 
lots of detail, which can 

be distorted by dissolving 
between filtered layers to 
create a shimmering effect. 


Turn up the temperature by adding a 
shimmering heat haze to a source photo 


M uch of the work we’ve done 
in this guide has involved 
cutting from one frame to another 
to create the illusion of a moving 
image. Most of the animations we’ve 
produced feature movement created 
by moving a layer’s content from 

A to B, and adding tweened frames 
to make the content move across 
the screen. Other animations have 
involved creating a moving element 
by making layers become visible or 
invisible at particular frames, such 
as the flickering flame powering the 
flying missile on page 66. 


SETTING THE SCENE 


Another way in which we can use 
ImageReady to create the illusion 
of movement is by mixing, or 
dissolving, between layers. This 
creates more subtle and realistic 
movements than you could achieve 
by simply turning a layer on or 
off during an animated sequence. 
Several of the naturally-inspired 
animations that we’ll create in this 
chapter will employ the dissolve 
technique, and we can also combine 
this process with toggling the 
visibility of layers, to add variety 
and texture to our animations. 


Select a suitable source photo for the heat haze treatment 


If you live in Britain you'te less likely to see heat hazes on 
account of the inclement weather, but tracking down a 
suitable source photo to add a heat haze to shouldn't be 
hard. A common time and place to spot a heat haze is on a 
road in the summer: the black tarmac absorbs the sun, and 


radiates waves of heat that cause objects behind them to 


ripple like a reflections in a liquid. You may not be able to 


capture a heat haze on camera, but thanks to Photoshop's 


filters and ImageReady’s animation tools you can mimic the 


effect quite convincingly. In the following walkthrough you'll 


get to see the dissolve technique in action in ImageReady. 
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This looks a likely spot for a heat haze. 
Alternatively, take a photo onan 
empty beach and pretend it’s a desert 


Animating nature 


Dissolving between layers 


Create the heat haze animation by dissolving 
back and forth between two filtered layers 


Open the file Road.tif in Photoshop, or 

use your own image. Double-click the 
layer’s thumbnail to unlock it, and drag it to 
the ‘Create new layer’ icon at the foot of the 


Layers palette to duplicate it. These two Photoshop 
layers are all you need to create an infinitely Although we talk about 
looping animation. Select the top layer, and using ImageReady's 

4 Animation palette in most 
go to Filter > Distort > Ocean Ripple. Set of our walkthroughs, 
Ripple Size to 14 and Ripple Magnitude to 2. Photoshop CS2 users should 


Hide the top layer (Layer 0 copy) and 
target the layer beneath (Layer 0). 
Go to Filter > Distort > Ripple again, and 


bear in mind that they can 
also follow the projects 
entirely within the 
Photoshop interface, As 
we've seen, Photoshop CS2's 
own Animation palette can 


enter different Magnitude and Ripple Size be used to create larger 
values to create an alternative rippling animations destined for 
layer. You can now activate Photoshop's theTVscreen. 
Animation palette if you're using CS2, or 
press [Shift]+[Ctrl]/[Command]+[Y] to open 
the file in ImageReady. 

Open the Animation palette, and make 

sure that only Layer 0 is visible in 
Frame 1. Click the ‘Duplicates current frame’ HeatHaze.gif 
icon, and make Layer 0 copy visible. Click Check out the results of our 
on the Tween icon and choose Tween With: ‘heat haze walkthrough by 

viewing the animated GIF in 


Previous Frame. Add 3 frames and click OK. 
Now the animation will dissolve from Frame 
1 to Frame 2, creating a shimmering effect. 
Play the animation to test it. 


your browser. By tweening 
between two similar frames 
we create a gentle dissolve 
that causes a realistic heat 
haze effect. Our finished 
GIF is quite large, making 


. this particular project more 
4 | At this stage the image mixes from one suitable for a DVD interface 
layer to the other to create the haze or something similar. 


effect. However, the sequence then jumps 
back to Frame 1 with a jolt. Target Frame 5, 
click the Tween icon, and select Tween With: 
First Frame. Because the last frame is now 
the same as the first, the jump from the last 
frame to the first will be seamless, creating 
an infinitely looping animation. 
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The perfect storm 


Lightning.gif 

Check out our stormy 
weather animation on the 
cover disc to see the effect 
of mixing dissolves and cuts 
to create different types of 
movement. The video 
tutorial will take you 
through all the steps you 
need to edit the source 
photos in Photoshop, 
create components such 
as lightning bolts, and 
animate the different 
elements in ImageReady. 


Use a variety of filter effects and animation 
techniques to create a multi-layered drama 


O n the previous page we 
created an infinitely looping 
animation by dissolving between 
two layers. In the next walkthrough 
you'll create a more sophisticated 
animated sequence, by using the 
same technique to make lightning 
flare up in background clouds, 
instead of simply flashing on and 
off. You’re also going to add rain 
to the scene, but rain will look 
unconvincing if you simply tween 
between rain layers. Rain needs to 
be created by turning different rain 
layers on and off in each new frame; 


WHAT You’LL CREATE 


Create sheets of driving 


rain by combining the Clouds 


filter with the Motion Blur 


filter and rapidly alternating 


between two frames. 


Use layer blending modes 


fortunately, you can combine tweens 
and cuts if you create the animated 
effects in a specific order. 

The first job is to create lightning 
using tweened dissolves, before 
turning the tweened frames into new 
layers in the Layers palette. You can 
then add elements such as rain to 
the animation by cutting between 
different rain layers. Combining 
mixes and cuts can be a difficult 
technique to master, so we’ll take 
you through the whole project step 
by step — and help you acquire some 
powerful new animation skills. 


Combine the Clouds and 
Difference Clouds filters 
with Image > Adjustments 
commands to create jagged 
lightning bolts in minutes. 


Use ImageReady’s 


Animation palette to trigger 
lightning strikes, flaring 
clouds and driving rain in 

a single animation. 


to add interactive lighting 
effects to your buildings, 
so that they react to the 
lightning bolts. 
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Animating nature 


Sky replacement 


Edit your source image to replace an calm 
sky with a more dramatic cloudscape 


Bel 


Rin Soest 


fl Open Castle.jpg from the cover disc. 
This type of gothic subject matter will 
look great as part of a stormy scene, but we 
have to prepare the image before we can 
animate it. To animate the clouds we need 
to create a separate sky layer, and we'll add 
a more dramatic skyscape at the same time. 
Double-click the Background layer’s 
thumbnail to unlock it, and label it Castle. 


Select the Magic Wand Tool [W]. Set its 
Tolerance to 32, and tick Contiguous 
so that it only adds adjacent pixels to the 
selection - this stops you accidentally 
selecting parts of the building that havea 
similar colour to the sky. Click to sample the 
sky; hold down [Shift] and click to add any 
parts of the sky missed by the initial 
selection. Hit [Backspace] to delete the sky. 


Press [Ctrl]/[Command]+[D] to deselect 
the marquee created with the Magic 
Wand. Click on the ‘Create new layer’ icon 

at the foot of the Layers palette, select the 
new layer and place it behind the castle 
layer. Go to Filter > Render > Clouds to fill 
the layer with a fractal cloud pattern, and 
label the layer Background Clouds. The 
clouds look a little flat, so we'll fix that next. 


Zoom out so that you can see the 

edges of the document. Go to Edit > 
Transform > Perspective. Drag the top-left 
handle of the transform box to the left to 
distort the pixels on the Background Clouds 
layer. By stretching and enlarging the pixels 
near the top of the image you'll give the 
clouds a sense of depth, as they appear to 
recede into the distance. 


Tidy up 

It’s quite possible that the 
Magic Wand Tool will miss 
a few sky pixels when you 
make your selection in 
step 2-mop up any strays 
using the Eraser Tool [E]. 


Full Screen Mode 

When youre transforming 
the clouds in step 4 give 
yourself more room to work 
by pressing [F] to switch to 
Full Screen Mode. This will 
enable you to zoom out of 
the image, and see the 
transform box's selection 
handles more clearly as you 
distort the cloud layer. 
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Lights in the sky 


CGI 

When most people hear 
the term CGI (Computer 
Generated Imagery) they 
think of 3D animated 
dinosaurs, or other such 


spectacular effects. As our 
clouds are created entirely 


within Photoshop they 
count as CGI too, since 
they're produced within 
the digital realm. 


Lightning.mov 
Check out our Photoshop 


training video on the cover 


disc to see a practical 
demonstration of how to 
apply the Photoshop and 
ImageReady techniques 


used in this chapter. Seeing 
the animation being created 


from scratch will give you 


a valuable insight into the 


production process. 
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Use blending modes to make your clouds 
flare as if illuminated from within by lightning 


2 THE WEB 


Drag the Background Clouds layer 

on to the ‘Create a new layer’ icon to 
duplicate it, and rename the duplicate layer 
Cloud Flare. Set this layer’s blending mode 
to Color Dodge - this will cause the lighter 
Parts of the layer to flare up dramatically, 
and this is the key to creating our lightning 
illumination effect. 


fo] The burnt-out flaring effect is a little 
over the top, as it affects the entire layer. 
Click the ‘Add a mask’ button to add a mask 
to the Cloud Flare layer. Set the foreground 
colour to black. To localise the lightning 
bursts select the Gradient Tool [G]. Open the 
Gradient Editor, and choose the Foreground 
to Transparent gradient. Click OK, and select 
Radial Gradient from the options bar. 


Click and drag to draw several radial 
gradients on the Cloud Flare layer’s 
mask. This will make parts of the layer 
become transparent, which will reduce the 
amount of cloud flaring. Click the eye icon 
to turn the Cloud Flare layer on and off: this 
will give you a rough preview of how the 
clouds will behave when we animate them. 
Parts of them will flare up, as if illuminated. 


To make the building interact with 

the lightning bolts duplicate the castle 
layer. Call the copied layer Dark Castle. Go to 
Image > Adjustment > Levels. In the Levels 
dialog change the Shadow level to 120 to 
make the shadows look even darker. Click 
OK. Place the Dark Castle layer underneath 
the original Castle layer, and set the Castle 
layer’s blending mode to Overlay. 


Animating nature 


Bolts from the blue 


Use a combination of Photoshop filters 
to create jagged bolts of lightning 


Create a new layer in the Layers 
palette, and label it Lightning bolt. 

Go to Filter > Render > Clouds to fill the new 
layer with a fractal cloud. You'll be able to 
harvest a suitable lightning bolt from this 
cloud layer after a bit more filtering. Go to 
Image > Adjustments > Equalize to increase 
the contrast between the cloud layer’s 
shadows and highlights. 


With the Lightning layer still targeted 

go to Filter > Render > Difference 
Clouds - this creates a cloud pattern with 
erratically shaped dark lines threaded 
throughout the texture. To turn these dark 
lines white go to Image > Adjustments > 
Invert. The white lines should now look like 
bolts of electricity. 


fa] Go to Image > Adjustments > Equalize 
again to increase the contrast in the 
Lightning layer. Set the Lightning layer’s 
blending mode to Screen. The darker parts 
of the cloud layer will vanish, leaving lots of 
potential lightning bolts. Add a layer mask 
to the Lightning layer, and use a soft black 
brush to remove most of the lines until 
you've isolated a small section of lightning. 


Place the Lightning layer beneath the 
two Castle layers. Use the Move Tool to 
position your remaining lightning discharge 
so it’s striking between the two towers of 
the source image. To add some colour to the 
lightning go to Image > Adjustments > Hue/ 
Saturation, and tick the Colorize box. Drag 
the Hue slider to change the colour of the 
bolts, and increase the Saturation. 


Mask or erase? 

In step 11 we use a black 
brush on a layer mask to 
get rid of most of the lines 
on the layer. Alternatively, 
you could erase the 
unwanted bolts using 

the Eraser Tool. The 
advantage in using a layer 
mask is that you can restore 
hidden areas of the layer by 
changing the brush to 
white, so you have more 
creative control. 


Different hues 

When adjusting the Hue in 
step 12 we chose a value of 
243 to add a bluish tinge to 
the edges of our lightning 
bolts, but you can create 
any colour you like by 
experimenting with the Hue 
slider. A hue value of 99 will 
add a greenish glow to the 
edges of your lightning, 
while a hue of 0 will turn 
your lightning bolts a 
dramatic and vibrant red. 
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Into ImageReady 


Back and forth 
Although we still have to 
create the rain elements, we 
can switch to ImageReady 
and start the animation 
process. As we've seen, 
Photoshop and ImageReady 
are very flexible, and you 
can jump back and forth 
between the packages to 
create and animate new 
content at any stage in the 
production process. 


Scale it down 

Our castle source image 

is large enough for you to 
create a full-size animation 
fora TV screen. If you have 
CS2 you can follow the 
steps on this page using 
Photoshop's Animation 
palette instead of switching 
to ImageReady, enabling 
you to output your 
animation to a camcorder 
for playback ona TV 
monitor (see page 48 for 
more details). To create a 
smaller animated GIF you 
can scale down the image 
size at any time. 
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Take your layers into ImageReady, and make 
the lightning flare up inside the clouds 


fa] Click the Edit in ImageReady button, 
— and in ImageReady open the 
Animation palette. At Frame 1 turn off the 
Castle, Lightning and Cloud Flare layers, so 
that only the Dark Castle and Background 
Cloud layers are visible. This creates the 
scene before any lightning activity. 


Click the ‘Duplicates current frame’ 
button, and make the Cloud Flare layer 
visible. Play the animation - at this stage the 
lightning in the clouds cuts in abruptly. 
Select Frame 2. To make the clouds flare up 
more realistically, click on the Tween icon. In 
the Tween dialog set Frame 2 to Tween With: 
Previous Frame. Add 4 Frames. Click OK. The 
clouds now flare up gradually over 6 frames. 


To make the lightning in the clouds 
dissipate gradually target Frame 6. 
Click the Tween icon, and select Tween With: 
First Frame. Add 4 frames. This will add 
tweened frames that make the lightning 
fade. As the last frame in the Animation 
palette matches the first you can set the 
animation to loop forever; the clouds will 
flare up, then return to their original state. 


fis] To make the lightning illuminate 

the tower target Frame 6. Make the 
Lightning layer visible in the Layers palette, 
so it flashes on at this frame. To make the 
lightning bolt interact with the castle target 
Frame 7. Make the Castle layer visible - the 
Overlay mode will cause the highlights 

on the castle to over-expose. Keep the 
Lightning layer visible at this frame too. 


Animating nature 


Just add water... 


To finish off, create sheets of driving rain, and 
add them to your dramatic animated scene 


f7] Target Frame 1. Click Edit in Photoshop. 
Create a new layer called Rain01. Go to 
Filter > Render > Clouds to fill the layer with 
texture. Go to Filter > Noise > Add Noise. Set 
Amount to 100%, Distribution to Gaussian 
and tick Monochromatic. Turn the noise into 
rain-like streaks by choosing Filter > Blur > 
Motion Blur. An Angle of -59 will create 
slanting streaks. Set Distance to 99 pixels. 


To show the background layers through 
the rain set the layer’s blending mode 
to Overlay, and reduce its Opacity to 71%. 
Repeat the previous step to create a new rain 
layer called RainO2. Change the angle of the 
Motion Blur by a few pixels, and increase the 
Distance to 110 to create a slightly different 
rain layer. This will enable you to cut 
between the two rain layers in ImageReady. 


Click the Edit in ImageReady icon. 
Notice that both rain layers are visible 
on every frame in the Animation palette. 
Target each frame, and change the visibility 
of the Rain layers so they alternate. On 
Frame 1 make Rain01 visible, and Rain02 
invisible. Swap the Rain layers’ visibility 
around for Frame 2. Repeat this process for 
the whole 10 frames. Play the Animation. 
The rain will flicker, lightning will strike 
and the clouds will flare up. You have an 
animation that mixes dissolves (the flaring 
clouds) with cuts (the lightning and driving 
rain). To make the animation more suitable 
for playing on the web go Edit in Photoshop. 
Use the Crop Tool to create a banner-shaped 


image. Go to Image > Image Size and change 
the Width to a lower value, like 500 pixels. 
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Increasing contrast 
To increase the contrast 
of the rain layer in step 17 
target the Rain0! layer. Go 
to Image > Adjustments > 
Equalize. In the Equalize 
dialog tick the radio button 
labelled ‘Equalize entire 
image based on selected 
area, Click OK. This will 
make the lighter parts of 
the rain stand out. 


More rain 

When you play the finished 
GIF you'll notice that two 
different rain layers are all 
it takes to create the illusion 
of falling rain. This helps 

to keep the file size of the 
final GIF down. If you're 
creating an animation for 
TV (such as a looping 
animated background fora 
DVD menu, for example), 
you can add more rain 
layers to create smoother, 
more realistic rain. 
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CREATING 
ROLLOVERS FOR 
YOUR WEBSITE 


Make your website genuinely interactive by 
incorporating animated GIFs into the design 
of a page. You can then use ImageReady’s 
rollover tools to trigger animations 


A: you’ve worked through this 
Focus Guide you’ve built up 
a repertoire of techniques and skills 
that will enable you to create all sorts 
of animated GIFs. You can animate 
simple logos so they zoom in and 
out or rotate, as well as creating 
photo-realistic moving characters, 
and terms such as tweening and 
looping should now be part of your 
everyday vocabulary. 

All the animated GIFs you’ve 
learned to create can be embedded 
into any web page as standalone 
graphics. They’Il help to draw the 
eye of passing visitors, encouraging 
them to take a closer look at your 
site. However, we can make GIFs 


do much more than just pull in the 
punters: by making them react to the 
presence of a visitor’s cursor, your 
animated GIFs can add a valuable 
interactive dimension to your site. 


Interactivity 

In this chapter we'll go a step further 
than simply creating animated GIFs, 
and demonstrate how you can use 
your newly-acquired skills to add 
interactive buttons to your web 
pages. Instead of being mere online 
eye-candy, GIFs can also have a 
practical function — they can serve 
as animated links to other pages of 
your site. When a visitor rolls their 
cursor over a button, or even part of 


Page 100 Save your interactive GIFs, Page 101 Analyse a rollover, and 
and ImageReady will generate HTML files learn about different rollover states 


Page 102 Modify text with layer styles Page 105 Modify a brush’s attributes Page 104 Add multiple animated 
to create a sci-fi-style animated logo to create a galaxy of stars in seconds 


a larger interface element, we can 
make the action trigger hidden GIFs 
that are embedded into the design 
of the web page. In our main 
walkthrough in this chapter you’ll 
learn how to create a single home 
page that contains two animated 
rollover buttons, which send bursts 
of flame shooting out from the 
surface of a sun, and cause stars to 
spin into spiral-shaped galaxies. 


New dimensions 

We'll ease you gently into the 
concept of interactivity, by showing 
you how to create a simple rollover 
button, the ‘state’ of which changes 
when the cursor passes over it. Then 


Interactive animation 


we'll move up a gear, and show you 
how you can trigger multiple frames 
of animation that play whenever a 
visitor’s cursor passes over a 
particular section of a web page. 
You’ll also discover how to slice 
up your web page to mix animated 
GIFs and static images together in 
one HTML document. You'll be able 
to create an interactive web page 
entirely within ImageReady, without 
needing to know anything about 
HTML coding. Being able to trigger 
animated GIFs that link to other web 
pages provides visitors to your site 
with an entertaining and immersive 
experience, so prepare to get 
interactive with ImageReady! 
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Page 102 Use Photoshop to create the 
components for a animated rollover GIF 


rollovers to a single page design 
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Chapter 7 


Creating HTML 


Put your animated GIFs online for the world 
to see — without having to know HTML 


; hroughout this Focus Guide 
we’ve shown you how to create 


animated GIFs that you can share 
with the world by placing them on 


HTML code that you need in order 
to get your work online, as well as 
placing the GIF in a ready-made 
folder called Images. To generate 


Output settings 

For more information on 
HTML output settings, check 
out page 93 of Photoshop 
Focus Guide issue 10, which 
you'll find on the cover disc. 
This page examines HTML, 
and its relationship with 
GIFs, in more detail. 


HTML along with your GIF simply 
go to File > Save Optimized As to 
bring up a dialog box with various 
saving options. Then open the 
pull-down menu of the dialog’s 


the internet. GIFs are just as easy 
to add to a web page as JPEGs are: 
you simply embed the name of the 
GIF in the body of your web page’s 
HTML code. A typical link to an 
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animated GIF might read <image 

src= “images/StopMotion.gif” 

width="160” height="131” alt+’”’>. 
However, don’t worry if HTML 

is a foreign language to you, as 

ImageReady will generate all the 


GET ONLINE 


Format option, and choose HTML 
and Images (*.html). Click on Save, 
and ImageReady will create your 
GIF, a folder for it to reside in, and 
an HTML document that provides 
a link to the GIF. 


Upload a GIF straight to the web, or add it to an existing site page 


Once you've followed the steps above to create your GIF and 
HTML code you can upload the Images folder and the HTML 
document to your web host. Make sure the files stay in the 
same directory, as the HTML document is targeting the GIF 
in the Images folder; if the Images folder is placed elsewhere 
the HTML file won't be able to locate your GIF. Tell people 
the URL of your site, and the name of the HTML document, 
and they'll be able to access your GIF. Alternatively, add your 
GIF to a web page using a package such as Dreamweaver or 
GoLive: these will read the HTML generated by ImageReady, 
or you can simply import the GIF into existing templates. 


Focus Guipe — Anos PHoTosHor +e We 


ImageReady creates a folder 
containing your GIF, and an HTML 
document that links to the GIF 


Interactive animation 


Create a simple rollover 


Create a simple yet effective interactive GIF that 
changes state when a cursor passes over it 


Ree are popular ways of 
indicating that a particular 
element on a web page is actually 
a button that’s just begging to be 
clicked. Many rollover GIFs contain 
only two layers, and the visibility 
of these layers is defined by two 
‘states’. The ‘Normal’ state describes 
how the GIF looks on the page, and 
when someone passes their cursor 
over the GIF this triggers the ‘Over’ 
state, which turns one layer off and 
reveals the layer below. 

In ImageReady use the Type Tool 
to create a text label for a button. 


Click on the ‘Add a layer style’ icon 
at the foot of the Layers palette, 

and select Pattern Overlay. Choose 

a pattern for your text: this is what 
your GIF will look like in the 
normal state. Now duplicate the text 
layer, and edit the Pattern Overlay 
effect on the copy layer, for example 
by scaling up the pattern — this is the 
layer that will be visible in the Over 
state, when the cursor moves over 
the GIF. You can use all sorts of tools 
and filters to make each text layer 
change — by adding a blur to the 
Over state’s layer, for example. 


CREATING A ROLLOVER BUTTON 


To turn two layers intoa 
rollover GIF go to Window > 
Web Content. This opens the 
Web Content palette. 


The top thumbnail 
indicates which layer in the 
Layers palette will be visible 
in the Normal state. 


This thumbnail indicates 
the layer that will be visible 
in the Over state whena 
cursor moves over the GIF. 


Rollover.mov 

Creating a rollover GIF is 
asimple affair, but if you're 
in any doubt about how to 
do it check out this short 
training movie on the CD. 
It’s important to get your 
head around the way in 
which a simple rollover 
button works, so that you 
can build on this knowledge 
to create more complex 
animated rollovers that 
contain multiple frames. 
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Target the Over thumbnail 
in the Web Content palette, 
and choose which layer you 
want to be visible whena 
cursor moves over the GIF. 


Target the Normal 
thumbnail in the Web 
Content palette, and choose 
which layer you want to be 
visible in the Layers palette. 


Click on the ‘Create 
rollover state’ button. 
This will add two new 
thumbnails to the Slices 
section of the palette. 
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Chapter 7 


Animated rollover components 


Vector vraster 

Flash users will be familiar 
with vector text, and will 
appreciate the fact that it 
enables them to create 
animated scaling graphics 
that havea tiny file size. 
Photoshop users can create 
text as a vector graphic, 
but if you want to add filter 
effects to text you need to 
turn it into a bitmap — this is 
what we do in step 2, when 
we rasterise our vector text. 


More rollovers 

In theory you could take 
many of the creative 
animation projects in this 
guide and turn them into 
animated rollover buttons. 
For example, the source files 
for the podcast icon created 
in Chapter 4 could be edited 
so that the circular radio 
waves only emit from the 
logo when the cursor passes 
over it, rather than having 
the GIF loop permanently. 
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ALIEN INVASION 


Here's how to create a more complex rollover 
button that plays multiple frames of animation 


We'll create an animated rollover to 

adorn the splash screen of a website: 
when the cursor passes over it the text will 
glow and ripple, like the titles of a sci-fi 
B-movie. Create a Photoshop document at 
a size of 800x600 pixels - we can crop and 
scale the document down later. Use the 
Horizontal Type Tool to create a text layer; 
we chose the Impact for its chunky letters. 


Duplicate the text layer. Right-click 
([Ctri]+click) on the text layer’s 
thumbnail to open a pop-up menu, and 
choose Rasterize text. Label the layer Glow. 
Click on the ‘Add a layer style’ icon at the 
foot of the Layers palette, and select Outer 
Glow. Choose a green colour for the glow, 
and set Spread to 6% and Size to 9 pixels. 
Click OK to apply the effect. 


Duplicate the Glow layer, and select 
the copied layer. Label it Glow 2. Go 

to Filter > Distort > Ripple. In the Ripple 
dialog box set Size to medium and Amount 
to 216 to distort the letters. We can use 
ImageReady’s Web Content palette and 
Animation palette to turn these static layers 
into an animated rollover GIF. 


Duplicate Glow 2, and call the new 

layer Glow 3. To make the text flare 
up at the end of the sequence go to Filter > 
Blur > Radial Blur. Set Amount to 67 and 
Blur Method to Zoom. Set Quality to Draft, 
as this will create a simpler blur texture, 
enabling us to create a small GIF. Click OK 
to apply the filter, and save the document 
as AnimatedRollover.tif. 


Animate the components 


Interactive animation 


Use ImageReady’s Web Content palette to 
create an interactive animated rollover graphic 
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ALIEN INVA 


SION 


Crop the image so the edges of the 
largest layer are still visible. Click the 
Edit in ImageReady icon in Photoshop to 
open your layered document in ImageReady. 
Open the Web Content palette, and the 
Animation palette. Turn off all the layers in 
the Layers palette except the original text 
layer and the background: this will form the 
Normal state of the rollover. 


fe] Click the ‘Create rollover state’ button 
in the Web Content palette, and click 
the Over thumbnail in the Rollover States 
section. Click ‘Duplicates current frame’ in 
the Animation palette to create Frame 2. 

Go to the Layers palette and turn on the first 
Glow layer. Click on the Preview Document 
button and move the cursor over the logo: it 
will flicker between the two frames. 


Click the Preview Document icon to go 
back to ImageReady’s editing mode. 

To add extra frames to the rollover select the 
Over thumbnail in the Web Content palette. 
Select Frame 2 in the Animation palette and 
duplicate it. Turn on the Glow 2 layer, which 
features the rippling version of the logo. 
Preview the rollover: the text will glow 
green when the cursor moves over it. 


Repeat the previous steps to adda 
fourth frame, and turn on the Glow 3 
layer: this will make the logo pulse when the 
cursor passes over it. At this stage the GIF 
cycles through the glowing layers and jumps 
back to the original non-glowing text. You 
can modify the animation by selecting and 
duplicating the four frames, then reversing 
them to create a gently pulsing effect. 


Animated 
Rollover.html 

Interact with our animated 
rollover GIF by accessing it 
from the cover disc. Look in 
the GIFS folder — inside it 
you'll see another folder 
called Animated Rollover. 
Inside that isan HTML file 
called AnimatedRollover. 
Atm. Double-click on the 
HTML file to view and 
interact with the rollover 
in your browser. 


Saving a rollover 

Up until now we've saved 
our animated GIFs by going 
to File > Save Optimized As, 
and selecting the Images 
Only (*.gif) option. Because 
animated rollovers are 
interactive you need to save 
them using the HTML and 
Images (*.html) option — 
this creates a folder for the 
GIF's components, and an 
HTML file that describes how 
the GIF behaves. 
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Chapter 7 


Multiple animations 


Pack a web page full of interactive animated 
rollovers to enhance your visitors’ experience 


O n page 101 we explained how 
ImageReady’s Web Content 
palette can be used to create a simple 
rollover that changes from one 


Spaceinterface.html . 
To see our animated graphic to another when the cursor 
lorerecesnaction and! moves over it. We then moved things 


interact with its rollovers, 
click on the Spacelnterface. up a notch to show how rollovers 


pumiitie Tis wall stcehrall can either contain a single change 
the sliced still images and 


animated GIFs together of image, or trigger multiple frames 
into aUnified graphicin of animation. In the following 

your browser, and trigger z 2 

the appropriate rollover walkthrough you’ll build on your 


animations when thecursor_ existing skills, and learn how to 
encounters them. “ 2 
create an interactive web page 
containing multiple rollovers, each 
of which will burst into life when the 


CREATING THE INTERFACE 


ImageReady slices up your 
image, and generates an 
HTML file to fit the separate 


cursor rolls over them to indicate 
links to other parts of the site. 

You'll also learn how to integrate 
multiple rollovers seamlessly into 
the design of your web pages. 

By slicing up the interface into 
chunks you'll be able to mix smaller 
animated GIFs with larger still 
images, and keep the file size of 
your web page to a minimum. 

The great thing about ImageReady 
is that it will slice up the design to 
separate the animated sections from 
the static, leaving you to get on with 
the business of being creative. 


Foralink toa pageon 
galaxies we'll show you how 
to create aan animated 


animated GIFs and still 
images back together when 
viewed online. 


The walkthrough will show 


you useful techniques and 
tips for creating interface 
content, such as using 
blending modes and filters 
to produce this fiery texture. 


The presence of a cursor 
will trigger animations, such 
as a burst of solar flare from 
this integrated GIF. 


104 | Focus Guive — Anose Prorosior s Wee 


rollover that turns a stream 
of stars into a spiral shape. 


You'll learn how to modify 
a brush tip to scatter stars 
around the interface witha 
few sweeps of Photoshop's 
Brush Tool. 


ImageReady’s Animation 
palette is used to create 
the two animated rollovers 
contained in the page. 


Interactive animation 


Create your components 


Produce some out-of-this-world graphics 
for the site’s main interface in Photoshop 


fh] In Photoshop go to File > New, and 
create a file that’s 800x600 pixels: this 
is a typical size for a web page. We'll sketch 
out the design for the main graphic, before 
adding extra layers that will be used to 
create animated rollovers. The main graphic 
will consist mainly of sliced JPEGs, and the 
smaller animated GIFs will be embedded 
seamlessly into the page. 


We'll start by creating an interstellar 
background of cloudy nebulae. Select 
the Background layer in the Layers palette 
and go to Filter > Render > Clouds to fill the 
layer with a greyscale texture. To add colour 
to the clouds go to Image > Adjustments > 
Hue/Saturation. Click on Colorize, and, fora 
cool intergalactic blue, set the Hue to 243. 


r3 | Give the background more depth by 
blurring it a little. Go to Filter > Render 
> Gaussian Blur. Set the Radius to 2.0 pixels, 
and click OK to apply the filter. Blurring the 
background removes detail from the clouds; 
this helps to concentrate the viewer's focus 
on the foreground details, like the huge sun 
we'll create on the following page. 


Create a new layer called Star 
Background, and select the Brush Tool 
[B]. Initially, the brush will spray a solid line. 
To get it to spray stars open the Brushes 
palette, and click on the word Scattering 

to access the Scatter attributes. Drag the 
Scatter slider up to 891%, and tick the Both 
Axes box. You can now use the brush to 
spray star-shaped dots around the page. 


> 


Full of stars 

Once you've modified your 
brush tip attributes in step 4 
you can populate the screen 
with stars in seconds. Vary 
the size of the stars by using 
the left square bracket key ‘[’ 
to shrink the brush, and the 
right bracket key J’ to 
increase the brush size. 


Resolution 

The default resolution for 
most Photoshop preset file 
sizes is 72dpi, and this is 

the resolution your site 
interface will be viewed at. 
However, you might find it 
hard to design at such alow 
resolution, as the graphics 
will look quite small on your 
monitor. Feel free to set your 
file's resolution to 144 pixels/ 
inch (which roughly equates 
to dpi) in step 1. You can 
shrink it back to 72 at the 
end of the creative process. 
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Chapter 7 


Bring me sunshine 


Create a massive glowing sun with a bit of 
help from Photoshop's layer blending modes 
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Create a new layer called Sun, and 
select the Elliptical Marquee Tool [M]. 
To keep the sun perfectly circular hold down 
the [Shift] key as you draw with the tool. 


Full Screen ahead Just as the physical universe formed from 
When drawing the sun in clouds of interstellar dust, so our animated 
step 5 you'll find it easier to universe will evolve from the ubiquitous 
Certec ins ciclest you Clouds filter. Go to Filter > Render > Clouds 
can draw outside the edge 
of the work area. Press [F] to. to fill the circle with a cloudy texture. 
go to Full Screen Mode with 
Menu Bar: this will hide any 
background desktop clutter, Use the technique described in step 2 
and place a solid grey = 
to colour the Sun layer; a Hue of 58 will 
background around the 
work area you can easily add a suitably yellow tint to the clouds, and 
extend the circular shape of for a more intense colour set the Saturation 
the sun into this area. to 39. Duplicate the Sun layer, and set the 
copied layer’s blending mode to Color Dodge 
to create a fiery surface for your sun. Adda 
red tint to parts of the surface by colouring 
the duplicated layer with a Hue of 0. 
7 | Target the Sun Copy layer, and go to 
Layer > Merge Down: this flattens both 
Random textures Sun layers into a single layer, but maintains 
When creating the cloud the texture created using the Colorize 
pa Oe eae option and the Color Dodge blending mode. 
of light and dark for a bit of To give the sun a glow target the Sun layer. 
variety. Every time you apply Click the ‘Add a layer style’ icon, and choose 
the Cloud filter it generates outer Glow. A Spread of 13% and a Size of 38 
arandom cloud pattern, ill 
eo een eG CRE? will create an effective glowing halo. 
[Command]+|F] to re-apply 
the filter until you're happy 
with the pattern. 
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fs] Before you create the components for 
the animated GIFs, add some text to 
the image to encourage visitors to click 

on the appropriate sections. We chose the 
elegant Eurostile font, and coloured it red 

to contrast with the yellows and blues of the 
background. A hint of drop shadow courtesy 
of Photoshop's layer styles makes the text 
even more legible. 


Interactive animation 


Add animation components 


Create graphic elements that you can use to 
add animated rollovers to the site's interface 


We'll now create the main component 
of an animated solar flare. Create a 
new layer called Flare. Select the Freehand 
Lasso Tool [L], and set its Feather option to 
4 to give it a soft edge. Draw the outline of 
a plume of fire emanating from the sun’s 
surface, and fill the selection with a cloud 
texture. To create a more contrasting texture 
go to Image > Adjustments > Auto Levels. 


To turn the grey clouds into a plume 

of fire use the same layer blending and 
colourising techniques you used on the sun’s 
Clouds filter layers. Increase the intensity of 
the solar flare by adding a higher value to 
the Lightness slider in the Hue/Saturation 
dialog box. Merge the two flare layers 
together to create a single jet of flame. 


To create the components for several 

frames of the solar flare rollover 
duplicate the Flare layer. Go to Edit > 
Transform > Scale. A bounding box with 
selection handles will appear around the 
flare. Drag a corner handle, and scale the 
layer down until it’s 80% of its full size - 
check the Width and Height fields in the 
options bar to see the precise percentages. 


After you've scaled down the Flare 

layer by 80%, duplicate that layer and 
scale the copy down by the same amount. 
Repeat this process until you have seven 
differently sized Flare layers. Re-label the 
layers Flare 01 to Flare 07, placing Flare 01 
- the smallest flare - at the top of the layer 
stack, and the rest in descending order. 
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Transformation tip 
When you scale a selection 
using the Transform options 
the object is scaled around a 
central reference point, and 
this makes the object scale 
inwards towards the centre 
of the bounding box. When 
you scale the Flare layers it’s 
helpful if they scale towards 
the bottom-left corner of the 
box. You can make this 
happen by clicking on the 
bottom-left square in the 
Reference Point Location 
grid, which is located at the 
left of the options bar. 


Transformation tip 2 
There's another, more 
intuitive, way to change 
the reference point of the 
Transform bounding box. 
Click on the reference 
point at the centre of the 
box, and drag it to anew 
location by moving the 
cursor. The selected object 
will then scale around the 
new location of the 
reference point. 
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Chapter 7 


Get interactive 


Jump to ImageReady, slice up the image and 
turn the Flare layers into an animated rollover 
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Preview it 

Once you've modified the 
frames for the Over state 
of your animated rollover, 
press [Y] to test the rollover: 
this will take you into 
ImageReady’s Preview 
Document mode. The solar 
flare won't be visible until 
you move the mouse over 
the relevant area of the 
interface and trigger the 
animated GIF. Press [Y] 
again to continue editing 
in ImageReady. 


Stock photos 

To get inspiration for your 
interstellar website's 
components you could trawl 
through Google's image 
search engine. If you have 
CS2 try using Adobe Stock 
Photos as an alternative 
resource, as this lets you 
download preview versions 
of images that you can use 
as reference material. 

Open Adobe Bridge, and 
select Adobe Stock Photos 
from the Favorites pane. 
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To turn your Flare layers into an 
animated rollover GIF that’s fully 
integrated with the rest of the image, click 
on the Edit in ImageReady icon to jump from 
Photoshop to ImageReady. Make sure that 
the Web Content and Animation palettes are 
visible. Turn off all the Flare layers, so that 
no flare is visible in the GIF’s Normal state. 


Target the largest Flare layer (Flare07), 
and click on the ‘Create layer-based 
rollover’ button at the foot of the Web 
Content palette. This slices the image up 
into sections, including a chunk that will 
contain our animated solar flare GIF. 


fs] Click on the Over thumbnail in the 
Web Content palette. Target Frame 1 
in the Animation palette, and make Flare01 
(the smallest flare) visible in the Layers 
palette. When the cursor rolls over the flare 
GIF, the smallest flare will appear at Frame 1 
of the animated sequence. 


Click on the ‘Duplicates current frame’ 
button to create Frame 2 of the rollover 
animation. Turn off the Flare01 layer, and 
turn on Flare02. A larger version of the flare 
will appear at Frame 2. Repeat the process 
to create seven frames in the Animation 
palette that show the seven Flare layers turn 
on and off, to create the effect of the flame 
shooting out from the sun’s surface. 


Interactive animation 


Modify the animation 


Fine-tune the behaviour of your solar flare GIF, 
then add another rollover to the interface 


At this stage the flare repeatedly shoots 
from the sun when the cursor rolls over 
it. We'll edit the rollover to make the flare 
fade as it increases in size, then dissipate. 
Make sure the Over thumbnail is selected in 
the Web Content palette, so you can see all 
the frames. Select Frame 5 in the Animation 
palette. Select Flare 05 in the Layers palette, 
and change its Opacity to 90%. 


Target Frame 6, and change the 

Opacity of the Flare06 layer to 70%. 
You'll be able to read the text beneath that 
particular flare. Target Frame 7, and change 
the Opacity of Flare07 to 30%. Press [Y] to 
preview the rollover. When the cursor moves 
over the solar flare GIF jets of fire shoot up 
from the sun’s surface, and then fade out, in 
a repeating cycle. 


Click the Edit in Photoshop button, and 
select the Star Background layer. Use 
the Elliptical Marquee Tool to select a cluster 
of stars under the Spiral Galaxies text. Go to 
Layer > New > Layer via Copy to place these 
stars on a new layer. Select the stars with the 
Elliptical Marquee Tool, and Filter > Distort > 
Twirl them at a setting of 65 degrees. Place 
the twirled star layer on top of the text layer. 


fo] Create two more twirled star layers, 
then switch to ImageReady. Target the 
third twirled star layer in the Layers palette. 
Click the ‘Create layer-based rollover’ icon. 
Target the Normal thumbnail, and hide the 
three twirled star layers. Target the new 
rollover’s Over thumbnail. Add three new 
frames to the Animations palette that play 
the three twirled star layers in order. 


Timing 

Our solar flare rollover 
flickers rapidly at the default 
duration of ‘No delay’ per 
frame. Slow down the 
animation a little by 
[Shift]+clicking on the first 
and last frames in the 
Animation palette to select 
all the frames. Change the 
duration to 0.1 secon one 
of the frames, and all the 
other frames will change to 
this duration as well. 


In the frame 

Ifyou can't see the solar 
flare frames you're editing in 
the Animation palette, make 
sure you're clicking on the 
GIF's Over thumbnail in the 
Web Content palette. 

The rest of the slices in the 
main interface are only 
represented by one frame in 
the Animation palette, as 
they're static JPEGs. 
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CREATING 
AN ANIMATED 
HOME PAGE 


In this final chapter we'll combine many of the 
tools and techniques we've covered to create 
a sophisticated interactive home page that 
features a variety of animated elements 


B y working through this Focus 
Guide you'll have built up a 


repertoire of skills that you can call 
on to create sophisticated web page 
animations. As well as providing 
links to other pages on a site, GIFs 
can also entertain the user; this will 
lead to increased traffic, as well as 
impressing visitors with your design 
skills. In this chapter we’ll draw on 
the techniques we’ve explored, and 
develop them further as we create a 
high-tech ‘spy’ home page. 


Pay attention 007 

Our site will feature an animated face 
scanner graphic, and a fingerprint 
icon that animates when it’s rolled 


over, as if scanning the visitor’s 
fingerprint. You'll also create a 
CCTV camera feed that displays 
cycling surveillance images. We'll 
show you how to modify source 
images in Photoshop to create the 
CCTV-style footage, as well as ways 
to animate the fingerprint scanner 
using tweening and blending modes. 
The gadget-themed interface 
will be packed with animated GIFs. 
Some of these will be interactive, 
so that the user can click on them 
to trigger an animation, as well as 
providing links to the rest of the site. 
Other animated GIFs will cycle 
through frames on a loop without 
being interactive, to add visual 


Website design 


Page 113 Use the Bevel and Emboss Page 115 Manually slice your design's Page 115 Create aremote rollover 
layer style to create a 3D-style interface | components, and label your slices that triggers an animation elsewhere 


Le 


Page 118 Modify source photos to Page 120 Test your animations by 


Page 116 Create a sophisticated 
rollover fingerprint scanning effect create a CCTV-style video animation playing them in a browser window 


interest to the page. You'll also 
create a remote rollover button that 
activates an animation in another 
part of the interface — a great way to 
enhance the interactive experience. 
The entire page would be a huge 
file to download if you created it as 
a single animated GIF, but as you 
learned in the previous chapter you 
can use ImageReady’s slicing 
features to chop up the Photoshop 
document’s contents into slices, to 
create a fully integrated design. 
Being able to slice up a document 
into a jigsaw-style mixture of 
animated GIFs and still images gives 
you the freedom to design all the 
components from the comfort of the 


Photoshop interface, without having 
to worry about editing tables to get 
the elements to fit together. 


OnTV 

While this last project is aimed at 
creating a website interface, owners 
of Photoshop CS2 could adapt our 
walkthroughs to create background 
animations for a high-tech DVD 
menu. You wouldn’t need to create 
the GIFs as rollovers, but you could 
get them to animate in a loop. 

You can then use DVD authoring 
software such as Encore to make 
your Photoshop-created animations 
link to chapters on the disc, instead 
of creating links to web pages. 
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Chapter 8 


Designing the background 


Good guides 

To be more precise when 
cutting the holes in your 
background press 
(Ctrll/[Command]+[R] to 
activate the rulers, and drag 
blue horizontal or vertical 
guides from the rulers on to 
the work area. These guides 
will help you to place the 
Rounded Rectangle Tool 
more accurately, and get the 
holes in the shape to align. 


Anyone for DVD? 

You can create a similar 
spy-themed animated 
background for a DVD 
menu by using many of the 
techniques demonstrated 
in this walkthrough. You'll 
need to start off with a TV 
resolution file size such as 
720 by 576 if you want the 
menu to fit a standard PAL 
TV monitor. You can follow 
this walkthrough to 
generate the interface'’s 
components, and animate 
them, but you won't be able 
to follow the interactive 
rollover instructions, as this 
only applies to web versions 
of the interface. 
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Create a brushed-metal background for your 
spy-themed interface using layer styles 


ft] Open Photoshop. Go to File > New and 
create a file that’s 1024 pixels wide by 
768 pixels high. Set the Resolution to 144 
pixels/inch. This is very large for a website 
interface, but it’s easier to create an effective 
design if you can get a closer look at the 
components. You'll be able to reduce the 
file’s dimensions at the end of the project, 
to make it suitable for viewing in a browser. 


Select the Rounded Rectangle Tool [U], 
and draw a rectangle that fills almost 
the entire workspace. To give it a texture we'll 
use a Pattern Overlay layer style. You could 
use a pattern from Photoshop's selection to 
fill your rectangle with texture, but if you're 
using CS or CS2 jump to ImageReady to 
access its huge pattern library. 


Click on the ‘Add a layer style’ button, 
and select Pattern Overlay. In the 
Pattern section of the dialog click the arrow 
next to the preview thumbnail to see a list 
of patterns. Select the Brushed Metal Strong 
pattern, and click OK to fill the rectangle. 

To modify the pattern-filled rectangle switch 
back to Photoshop. Label the modified 


shape layer Metal. 
4 | With the Rounded Rectangle Tool still 
selected click the ‘Subtract from shape 
area (-)’ button in the options bar. This will 
enable you to use the tool to cut holes in the 
background. These holes will be used as TV 
monitors that display animated components 
of the interface, such as footage from CCTV 
cameras. Click and drag with the Rectangle 
tool to cut three holes as shown. 


3D from 2D 


Website design 


Use layer styles to give your two-dimensional 
interface a sense of depth and solidity 


T he filled rectangle shape looks 
very flat, and not much like a 
high-tech security console designed 
to control access to our website. 

To make the brushed metal texture 
look much more realistic we need 

to add some depth and relief. Faking 
the illusion of 3D is another thing 
the Layer Styles dialog excels at. 
Click the ‘Add a layer style’ button 
at the foot of the Layers palette, and 
select the Bevel and Emboss option 
from the list of available styles. 

By modifying attributes in the Bevel 
and Emboss section of the Layer 


Usinc BEVEL AND Emsoss 


To add a smooth, polished 
look to your brushed metal 
interface set the technique 
option to Smooth. 


To change the attributes 
of the layer style click on the 
words Bevel and Emboss: 
the editable attributes will 
appear in the main dialog. 


Drag the little crosshairs 
icon to change the direction 
that the light source is 
coming from: this will make 
a huge difference to the 
success of your 3D illusion. 


Use the Bevel and Emboss layer style to create 
a sophisticated three-dimensional effect for 
your interactive spy site 


Style dialog we can add three- 
dimensional shading effects to our 
metal panel to give it more depth. 


Change your mind 

The great thing about using 
layer styles is that you can 
go back to them at any time, 
and alter their attributes to 
fine-tune the look of your 
graphics. You can tweak the 
look of your 3D metal 
interface at any stage by 
double-clicking on the Bevel 
and Emboss option in the 
Metal layer’s thumbnail. 
We'll also use layer styles to 
add an animated glow toa 
rollover button later on in 
this walkthrough. 


In the Structure section 

set the Style to Inner Bevel: 
this will immediately give 
the edges of the shape layer 
a sense of depth. 


To increase the effect of 
the Bevel and Emboss layer 
style set the Depth to 201%. 
This will make the holes in 
the rectangle shape look 
more indented. 


To make the holes in metal 
plate look more realistic 
set Direction to Down. You 
can insert animated GIFs 
into them later. 


Apose PHoTosHor For THE Wes — Focus Guipe 


113 


114 


Import source graphics 


Custom shapes 

If you can't find the custom 
Grid shape, open the Custom 
Shape picker in the options 
bar. You'll see a list of shape 
thumbnails. Click on the 
arrow at the top-right of 
the picker, and choose Reset 
Shapes from the list of menu 
options. Click OK in the next 
dialog that appears to 
replace the current shapes 
with the default shapes. 
You'll now be able to see 

the Grid shape. 


Edit the grid 

In step 4 you create a grid 
shape to overlay on the face 
components. As the shape 
is a vector-based object 
Photoshop automatically 
adds the layer styles you 
applied to the vector shape 
Metal layer; drag these layer 
styles to the trashcan to get 
rid of them. Colour the grid 
green by clicking on its layer 
thumbnail, and make it look 
more subtle by reducing its 
layer Opacity setting. 
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Add passport-style photos to your document 
to use as components for the face scanner GIF 


tr] Select the Ellipse Tool, and draw a circle 
shape on a new layer. Label this layer 
Button Off. The circle will have the same 
layer style settings that you created for the 
background texture. Select Blending 
Options from the ‘Add a layer style’ menu. 
Untick the Pattern Overlay option, and tick 
the Color Overlay option. Choose a red 
colour to create a plastic-looking 3D button. 


Duplicate the Button Off layer. Edit 

the copied button’s Color Overlay layer 
style to create a green version of the button. 
To give the buttons more physical presence 
add a Drop Shadow layer style to them. 
These buttons will be used to activate the 
face scanner GIF that you'll place in the 
adjacent window. 


Open the file Faces.psd from the cover 
disc (or create a similar file using your 
own photos). This will form an animated 
face scanner GIF that activates when the 
button is pressed. The three face layers in 
the document are grouped together. Drag 
the Face Group thumbnail from the Layers 
palette to the main work area. Place it under 
the Metal layer, and position it as shown. 
fs] To add more detail to the components 
for the face scanner GIF select the 
Custom Shape Tool. Open the Custom Shape 
picker, and select the Grid shape. Draw a grid 
over the faces in the Face Group - the grid 
shape will appear on its own layer. Remove 
any layer style effects that have been added 


to the new shape layer. Place the red button 
layer above the green button layer. 
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Remote rollovers 


Create a button icon that triggers an animated 
GIF in another part of the web page interface 


Click the Edit in ImageReady icon, and 

select the Slice Tool [K]. Drawa slice 
around the button, and draw a separate slice 
around the faces. Open the Slice palette. 
Choose the Slice Select Tool [O], and select 
the slice around the button. Type the name 
Scanning Button into the Name section of 
the Slice palette. Select the slice that’s over 
the photos, and name it Faces. 


ts] Select the red Button Off layer in the 
Layers palette, and open the Web 
Content palette. Click the ‘Create Rollover 
State’ icon at the foot of the palette. Anew 
Over thumbnail will appear. Select the Over 
thumbnail, and hide the red Button Off layer 
in the Layers palette to reveal the green 
button. Now, when the cursor rolls over the 
button it will change from red to green. 


Now we'll get the rollover button to 
trigger an animated face scanner GIF in 
a different slice. Select the Face Group layer 
in the Layers palette, then go to the Web 
Content palette. Just to the left of the Over 
layer is a tiny Target icon. Click and drag 
from this icon to the slice above the faces: 

a diagonal line will follow the cursor, linking 
the button’s Over state to the Face slice. 


Keep the Over thumbnail selected, and 

Open the Animation palette. Click the 
‘Duplicates current frame’ icon. In the Layers 
palette turn Face01 off to reveal Face02. 
Duplicate the current frame again, and turn 
off Face02 to reveal Face03. This will create 
a rapidly looping face scanning animation. 
When you click the button it changes from 
red to green, and triggers the GIF. 


Modifying rollovers 
Once you've created your 
remote rollover using the 

techniques described on this 
page you can modify it even 
further. To make the green 
button emit a green glow 
when it’s activated, select 
the Over thumbnail, 

and select Frame 1 in the 

Animation palette, Then 

select the Button On layer in 
the Layers palette, and add 
agreen Outer Glow layer 
style to the button. 


Modifying slices 

If you decide to use an 
Outer Glow layer style to 
make the green button 
glow, you might find that 
the glow is cut short where 
it overlaps the boundaries 
of the Button slice. You can 
increase the size of the slice 
to make room for the glow 
effect - choose the Slice 
Select Tool, and drag the 
corner handles of the 
Scanning Button slice to 
make it slightly larger. 
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Create a fingerprint scanner 


Stay normal 

Before you go back to 
Photoshop to add more 
components to your 
interface make sure you 
Select the Normal thumbnail 
in the Web Content palette, 
otherwise any new graphics 
you add in Photoshop may 
not appear in ImageReady 
later on, as they'll be 
associated with a rollover 
state, rather than the site's 
Normal state. 


Simple yet effective 
Our scanning fingerprint 
GIF looks very high-tech, but 
the cool effect is achieved 
using a simple technique. 
By tweening the start and 
end point of the white bar 
you can make it swipe 
across the fingerprint, and 
because the bar's blending 
mode is set to Overlay it 
causes the highlights in the 
fingerprint to glow as it 
Passes over them. 
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Add a fingerprint scanner to your high-tech 
interface using layer blends and tweening 


STOSHOP F 


THe Wes 


fi] Switch back to Photoshop, and open 
the file Fingerprint.jpg from the cover 
disc. Place the Fingerprint layer behind the 
Metal layer, so it shows through the hole in 
the interface. Press [Ctrl]/[Command]+[I] to 
invert the print’s whites and blacks. Go to 
Image > Adjustments > Hue/Saturation, and 
tick Colorize. Set the Hue to 110 to tint the 
print green, and click OK. 


Create a new layer called Print Scan, and 
place it above the Print layer. Use the 
Rectangular Marquee Tool set to a Feather 
of 2 to draw a narrow rectangle across the 
print. Fill the selection with white. Set the 
layer’s blending mode to Overlay. We'll 
animate the white bar in ImageReady to 
make the details on the fingerprint light up 
as the bar sweeps up and down. 


Place the bar at the top of the 
fingerprint graphic, and switch back to 
ImageReady. Select the Print thumbnail in 
the Layers palette. In the Web Content 
Palette click the ‘Create layer-based rollover’ 
icon to turn the print layer into a slice. Name 
the slice Print. Click on the Print slice’s Over 
thumbnail. Open the Animation palette, and 
select Print Scan in the Layers palette. 


Click‘Duplicates current frame’ in the 
Animation palette to create a new 
frame. Use the Move Tool to slide the white 
bar to the bottom of the fingerprint graphic. 
Click the Tween icon and add 5 frames. Press 
[Y] to preview the rollover. As the cursor 
moves over the fingerprint graphic the 
white bar begins to move vertically, causing 
the print to light up as if being scanned. 
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Create a CCTV animation 


Use Photoshop's filters to create the effect 
of a live feed from several CCTV cameras 


S o far in this chapter you’ve 
created two types of animated 
GIE, and embedded them in a web 
page interface using slices. The 
scanning fingerprint effect is 
achieved using an animated rollover 
that’s triggered by the presence of a 
cursor directly over the fingerprint 
icon. This makes logistical sense, 

as a real fingerprint scanner would 
require the user to place their finger 
on the scanner, so that their identity 
can be verified. The other animated 
GIF that you created was a remote 
rollover — pressing a button in one 


SOURCE FILES 


slice triggered an animation in a 
different slice. This is a great way 
of creating ‘cause and effect’ style 
animations, and you could adapt this 
technique to create all sorts of cool 
animated menu options. 

Another way of using animations 
to augment an interface is to avoid 
rollovers altogether, and have the 
animations permanently playing. 
The CCTV footage that we'll create 
in our next walkthrough will play 
without any interaction from the 
user, even while they’re triggering 
the other animations. 


Use Photoshop to create video-style source images 


To keep our CCTV animation's size down we'll only have 

four different source photos that will cycle in a loop. To 
make the GIF more visually interesting, one of the source 
files will be a layer of static picture noise that you'll create in 
Photoshop. This picture noise will be inter-cut with the other 
source photos, creating an effective electronic burst of visual 
static as we jump from one CCTV camera's footage to 
another. To enhance the low-quality look of CCTV footage 
we'll add horizontal scan lines using Photoshop’ filters, and 
finish each source photo off with some text, to identify 
which cameras footage is currently being displayed. 


CCTVsource.psd 

You'll find some suitable 
surveillance-style source 
files for your CCTV footage 
on the cover disc. We chose 
shots without moving 
objects in them (like people, 
for example) so that 

the animated GIF won't 
look like the series of stills 
that it actually is! 


files featuring empty locations to 
create your fake CCTV footage 
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Faking CCTV-style footage 


Faster captions 

Once you've created a 
caption for one CCTV layer, 
duplicate the text layer by 
dragging it on to the ‘Create 
anew layer’ icon. Then you 
can place the caption layer 
above the relevant source 
photo. Double-click on the 
type layer to edit the text 
while maintaining the 
same font size and style. 
[Shift]+click a caption and 
its photo layer, and press 
[Ctrl]/[Command]+[E] to 
merge them together. 


White noise 

The static ‘snow’ onan 
un-tuned TV screen is called 
white noise, and doesn’t 
tend to have a colour tint. 
We've tinted our picture 
noise blue purely for design 
reasons, as this adds a hint 
of colour to the interface 
when the noise layer flashes 
in the CCTV footage. 


Focus Gute — Avose PHorost 


Combine Photoshop’ filters to turn ordinary 
photos into surveillance camera images 


Open the layered file CCTVSource.psd 

from the cover disc. There are three 
layers in the file containing suitable subjects 
to add to our interface’s surveillance 
monitor. Target the Tunnel layer. Go to Filter 
> Texture > Grain. In the Grain Type section 
select Horizontal, and set the Grain Contrast 
to 60 to exaggerate it. Click OK. 


Target the other two layers one ata 
time, and hit [Ctrl]/[Command]+[F] to 
apply the same filter settings. This will create 
typically low-resolution CCTV images with 
horizontal scan lines. Select the Horizontal 
Type Tool [T] and choose a stylised font such 
as Fixedsys to create each CCTV camera's 
caption. Apply a Stroke layer style to the text 
to make it stand out against any background. 


Create a new layer called Static. Go to 
Filter > Render > Clouds to fill the screen 
with a fractal cloud pattern, then go to 

Filter > Noise > Add Noise. Set the Amount 
to 140%, and click OK. Apply a Gaussian Blur 
filter set to a Blur Amount of 2.0 pixels, to 
create a screen full of typical video noise. 

Go to Image > Adjustments > Hue/Saturation 
to add a blue tint to the noise. 


4 | [Shift]+click on the four layers, and 
Press [Ctrl]/[Command]+[G] to group 
them (or turn them into a layer set if you're 
using CS). Call the Group CCTVGroup. Drag 
the CCTVGroup’s folder icon from the Layers 
Palette on to your main work area. Place the 
CCTVGroup beneath the Metal layer, and 
Position it as shown. Scale the CCTVGroup’s 
content down a little to fit it into the screen. 
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Animate the CCTV footage 


Re-time the frames to make the CCTV footage 
cycle slowly between different camera feeds 


fs] Click the Edit in ImageReady button. 
~_| In ImageReady select the Slice Tool, 
and draw a slice around the CCTV screen 
footage. Use the Slice palette to label the 


new slice CCTV. You don’t need to select the Labelling slices 
CCTVGroup to slice it up, as the slice tool Ifyou neglect to label 
cuts through all the layers in the interface. slices as you create them 


then each slice will take the 


Now! we need to make the footage cycle narie ofthe document with 
without any interaction from site visitors. a corresponding number 
appended. Once you've got 

acomplex project like this 

Open the Animation palette, and click on the go you'll soon be 


unable to tell which slice 
name applies to a particular 


the ‘Duplicates current frame’ icon 


to create Frame 2. Turn off the Static noise slice on-screen. Giving slices 
layer to reveal the Tunnel layer. Duplicate suitable names will speed 
Frame 2, and turn the Static layer back on up your workflow no end. 


again. This noise layer will provide a 
transition between each CCTV footage layer. 
Duplicate more frames, to reveal the other 


camera layers. 
At this stage the footage will cycle too 

quickly. Keep the Static frames set to 
the default delay time of 0 seconds, so that Adapting techniques 
the tinted noise flashes up for a fraction of a Creating the looping 
second each time there's a cut to a different Survellance GIF will equip 


you with skills that you can 
camera. Set the frames showing camera adapt for your own projects. 


footage to a longer delay time of 5 seconds. If, for example, you have a 
Before previewing your animation, press the portfolio of photos that you 
[Tab] key to clear the interface of palettes. want to promote you can 


place a few of the best shots 
as thumbnails in an 


animated GIF, like the one 

fs] Press [Ctrl]/[Command]+[Y] to go to WAS EEEEATAE 
Preview mode. Sit back and watch the walkthrough: this will help 
CCTV footage cycle in a loop, with the static to get people clicking 


noise flashing up between each cut. Move through to see your work. 


your cursor over the fingerprint and watch it 
scan, and click on the red button to activate 
the face scanner. Your site is full of different 
animated GIFs, including simple animations, 
ordinary rollovers and remote rollovers. 
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Chapter 8 


Finishing touches 


Switch back to Photoshop to add a few visual 
embellishments to your interactive web page 


Reduce the size 

To cut the file down to size in 
ImageReady, go to Image > 
Image Size. Set the Width to 
600 pixels, which will make 
your page display happily in 
most browsers. Go to File > 
Save Optimized As. Choose 
HTML and Images (*html). 
ImageReady will optimise 
your file, turn the slices into 
images and place them ina 
folder. It'll also generate an 
HTML file that will link the 
images together, and run 
the animations. 


Spy-Interface.html 
Double-click on the HTML 
file on the cover disc to see 
our finished high-tech spy 
interface in action — it will 
open the associated images 
into your browser. If you 
use Internet Explorer you 
might find that you can't 
immediately interact with 
the animated GIFs — this is 
because Explorer has an 
annoying default setting 
that restricts active content. 
Click on the warning bar, 
and select Allow Blocked 
Content. Now you can 

play with the interactive 
animations in your browser. 
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Use the Rounded Rectangle Tool to 
draw some more panels on the metal 
interface to add more detail. To fill these 
additional panels with the same brushed 
metal effect press [Alt]/[Option] and drag 
the Metal layer’s layer effects on to the 
thumbnail of the new panel: this is a handy 
way of applying existing layer effects toa 
new layer in one easy action. 


ts] Use the ‘Subtract from shape area (-)’ 
option to cut holes in the panels: you'll 
need to select the relevant thumbnail first. 
Create a new layer, and place it beneath the 
Metal layer but above the animation content 
layers. Add screen reflections to each video 
display using a soft white brush in a new 
layer, and reduce the opacity of the layer 

to 65% to make the effect more subtle. 
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ImageReady recap 


Here's a quick recap of how to make the most 
of ImageReady's animation tools and features 


fi] Working through this guide you'll have 
discovered how ImageReady provides 
a variety of ways to create animated 
content. Tweening is one of the most useful 
ImageReady tools, as it saves you creating 
individual frames to change the position, 
opacity or layer style of an object. By using 
tweening you can create animations such as 
the bouncing ball in Chapter 2. 


La ; | Another effective way to add variety to 
| your animations is to use ImageReady’s 
ability to animate any layer style attribute; 
this can add a new level of sophistication to 
your animated GIFs. By tweening between 
different glow attributes you can create a 
pulsing neon logo like the one in Chapter 3. 


~) One of ImageReady’s main constraints 
Ea is that you can’t tween a layer’s content 
to transform it, but you can overcome this 
by duplicating the layer, editing it and then 
using the Animation palette to change the 
visibility of the layers, to create the illusion 
that an object is rotating or otherwise 
changing. An effective example of this is 

the sweeping radar animation in Chapter 4. 


a , | You don’t have to cut abruptly between 
| the content of each frame in an 
animation. Try mixing dissolves created by 
tweening two different shots with cuts, and 
build up the animation’s content in layers. 
The storm project in Chapter 6 demonstrates 
this technique: the lightning in the clouds 
mixes in gradually, while two layers of rain 
cut on and off over the lightning mix. 


Lovely loops 

Make good use of the fact 
that you can loop your 
animations: never add extra 
frames to an animation if 
you can achieve the same 
effect by looping between a 
small amount of frames. 
Looping helps you to keep 
the file size of the finished 
GIF toa minimum. 


Amazing actions 

Life's too short to go 
through repetitive editing 
and animation procedures 
if you don't need to. 

Use ImageReady’s actions 
to make your text zoom in 
and out (see page 43), and 
record your own actions 
that will enable you to 
create animated GIFs with 
a click of your mouse. 
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Here's how to get the most from the disc that 
accompanies your Photoshop Focus Guide 


| o access the resources and files window; here you’ll need to click on 
on this disc, including the huge ‘I Accept’. Please remember that this 


collection of fonts and exclusive disc has been scanned and tested at 
video tutorials, first insert the CD all stages of production, but — as 
into your drive. Whether you're with all new software — we still 
using a Mac or a Windows PC, the recommend that you run a virus 
disc will work equally well. If the checker before use. We also 
disc interface doesn’t run recommend that you have an up-to 
automatically, look at the opposite date backup of your hard disk before 
page to find out how to start your using this disc. Future Publishing 
installation manually. does not accept responsibility for 
any disruption, damage and/or loss 
Before you go on to your data or computer system that 
The first item that should appear on may occur while using this disc, or 
your screen is the disclaimer the data and programs on it. Please 


PHOTOWEBBER FULL PRODUCT 


Save time when converting Photoshop designs to web pages 


This full version of PhotoWebber, which is currently retailing 

for $129, is a design-forward web page creation program. 

Instead of starting with HTML constraints, and forcing 

designers to begin by making technical decisions up front, 

it starts with a completed Photoshop design, and adds the 

appropriate HTML commands and features to that design. PhotoWebber adds HTML to designs 

When you use PhotoWebber it’s no longer necessary to created in Photoshop, making it easy 
- 7 - to build fully-functioning web pages 

chop Photoshop files into little pieces and reassemble 

them manually in an HTML editor. PhotoWebber translates 

layered Photoshop files directly into matching HTML layouts 

effortlessly, enabling you to create great pages fast. 


www.medialab.com/computerarts 


consult your network administrator 
before attempting to install any 
software on a networked computer. 


Installation 

Once inside you’ll see a range of 
options in the menu bar. Click on a 
link to access the section that you 
require. Some files may need to be 
extracted from a zip file, try using 
WinZip to do this on PC if your 
version of Windows does not have a 
dearchiving utility (www.winzip. 
com). Our video tutorials require the 
latest QuickTime Player, from www. 


GoLive CS2 


On your CD-ROM 


PFG34 
‘ON YouRCD 
Photowebber — full product 
GoLive C52 PC demo 
ImageReady Shapes 
ImageReady Actions 


continents PLMOSHOD 


apple.com/quicktime/download. If 
you have a query about your disc, 
email support@futurenet.co.uk for 
help. To talk to a member of the 
team, call 01225 822743. Note that 
we can only provide basic advice on 
using the disc interface and 
installing the supplied software. We 
cannot give in-depth help on specific 
programs, or on your particular 
system configuration. 


Starting your 
installation manually 
PCusers: click on the 
Windows Start button and 
click Run.Then click Browse 
and go to the CD directory 
in My Computer. Look fora 
file called PSFGi.exe and 
double-click it.Then click OK 
in the Run dialogue, and the 
CD should then load up. 
Mac users: Double-click the 
disc icon, then double-click 
PSFGiClassic or PSFGIOSX, 
depending on which OS 
you're using. 


Create professional websites 


On the disc you'll find the PC demo version of Adobe GoLive 
CS2. This software will integrate with most other Adobe 
packages, including Photoshop and Illustrator, as well as the 
Adobe Portable Document format (PDF). 

With GoLive you can manipulate new CSS layouts, using 


Adobe GoLive cs2 


rich-environment mobile content development based on 
open standards. Site management capabilities have been 
improved, with support for transferring files through new 


FTP and Secure Socket standards. So what are you waiting 
Create stunning web pages by 
combining the power of Photoshop 
with GoLive CS2 


for? Give this incredible application a try, and make the most 
of the skills you've learnt in this Focus Guide. 


www.adobe.com 
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On your CD-ROM 


25 royalty-free images 


These high-quality images from iStockPhoto 
will add a professional touch to your work 


T his selection of 25 images, 
worth over $100, are an 
incredible sampler of what 
iStockPhoto offers. The iStockphoto 


CD images ; : < 

On the CD this issue you'll library contains over 100,000 files, 
issue y 

findthesefiveimages.and and 7,000 new images are added 

alot more from iStockPhoto, E e zi 

in high-resolution JPEG each week. Each image is reviewed 

format. To see the entire : - = 

Galasentra VEN for quality and legal integrity by 

www.istockphoto.com. a worldwide network of highly- 


qualified inspectors. These images 
are strictly not for resale. 


Just a sample 
of the many 
images that are 
included on 
your CD 
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my magazines.co.uk 


Next Month 


Adobe Photoshop 
The Digital Darkroom 


_| A professional digital artist reveals his tricks of the 
trade to enhance your images 


| All 100% exclusive tutorials - no adverts and no filler 


| 230 pages of expert Photoshop information in the 
guide and on the accompanying bonus disc 


_| The ORIGINAL monthly Photoshop title packed 
with all the know-how you need to become an 
expert with the world’s favourite image editor 

Includes bonus disc with full programs, image manipulation tools and Photoshop 
plug-ins, exclusive video lessons, a second FREE Focus Guide as PDFs, all the files 
you need to complete the tutorials & much more! 


All contents subject to change 


Glossary 


Glossary 


We always try to minimise the jargon, but it helps to add 
a few words of Photoshop-speak to your vocabulary. .. 


Anti-aliasing 

Moving pixels around can cause 
undesirable jagged edges to 
appear, where edited pixels have 
not blended smoothly together: 
Anti-aliasing refers to the process 
of smoothing out these jagged 
edges for a more natural look. 


Blending modes 

Blending modes are used 

to determine how the pixels ina 
layer are blended with underlying 
pixels on other layers. By 
applying specific blending modes 
to individual layers, you can 
create a wide variety of effects. 


Brushes 

Brushes enable you to paint 

on Photoshop images with 
colour, other bits of images and 
predefined patterns. They mimic 
real brushes in that you can alter 
their size, hardness and texture 
in order to achieve the effect that 
you want. 


Calibration 

The process of adjusting a device 
to bring its behaviour into line 
with a known specification, 
helping to reproduce colours 
accurately. For example, colour 
monitors are calibrated to a 
specific colour temperature, 
gamma, and black-and-white 
luminance. 


Colour channels 

There are three or more colour 
channels in all full-colour 
images, depending on which 
colour mode you're using. For 
example, RGB mode contains 
red, green and blue channels, 
while CMYK mode contains 
cyan, magenta, yellow and black 
channels, Photoshop enables 
you to alter each channel 
independently. 


Filters 

A filter is a preset tool within 
Photoshop, which applies 

an effect to an image (or a 
selection within the-image). 
Some filters apply their effect 

in one click, while others offer 
more complex settings. Filter 
categories include Sharpen, Blur, 
Artistic and Stylize, Each of these 
offer further options via fly-out 
menus, For a complete list, check 
out the Filter menu. 


Gamut 

The range of colour that a device 
(such as a printer) can produce, 
or the range of colour that a 
colour model can represent. 

Ifa colour is said to be ‘out of 
gamut’, it will not be reproduced 
accurately by the printing process 
or other intended destination. 


GIF (or .gif) 

A type of image file format best 
suited to producing simple images 
Jor the web, Examples include 
logos, banners, buttons and 
anything made up of only 

a few flat colours. 


Greyscale 

An image is greyscale if it 
contains no colour information. 
Using Photoshop, you can 
transform a colour image into 
black-and-white, with many 
gradations of grey, in a single 
channel. This as known as a 
greyscale image. 


JPEG (or .jpeg) 

A type of image file format that 
gives a desirable combination of 
small file size and good-quality 
photo reproduction. Its commonly 
used in digital cameras to store 
the images that you take. The 
small files sizes also make it ideal 
Sor the web. 


Layers 

Layers containing effects or 
elements of images can be stacked 
on top of the original image 

layer (the background) in order 

to change the appearance of the 
image. Layers do not directly 
affect the layers beneath them, 
just as a blurry piece of glass 
placed over a photograph does 
not actually affect the photograph; 
in both cases, it’ the appearance 
that has been changed, with the 
original image left unaltered. 


Marquee 

The flashing dotted outline that 
surrounds a selection. You'll also 
see it referred to in some places as 
‘marching ants’. 


Rasterising 

When you ‘rasterize'a graphical 
element, you convert it from a 
vector to a pixel-based image. 

It will no longer be scalable like a 
vector; but can still be edited, like 
other images in Photoshop. 


Resolution 

A measure of how many pixels 
make up an image. A resolution 
of 300dpi (dots per inch) is 
recognised as the minimum 
ifyou're intending to print 

your images. 72dpi is sufficient for 
images intended for the web. 


Selection 

Any part of an image which you 
select with Photoshop & tools, 
usually indicated by a marquee 
around it, Making selections 
enables you to work on parts 
of an image, or remove them, 
without affecting the rest of 

the image. 


Thumbnail 
A small, ‘thumbnail-sized’ version 
ofan image. You'll find them in 


Apose PHoTOst 


Jolders of images and 

in Photoshop’ File Browser. 
Because they re smaller than 

a full-size image they ve fast 

to load, and you can browse 
through them more quickly, which 
makes finding the file you re after 
much easier, 


Pixel 

An abbreviation for ‘picture 
element’, it essentially a tiny 
dot of colour on screen. Most 
images are made of up of millions 
of pixels, which combine to make 
an image look seamless. Zoom in 
very close to an image, however, 
or enlarge it to a high degree, 
and you can clearly see these 
individual pixels. 


PSD (or .psd) 

Adobe Photoshop's own file 
format, which preserves elements 
such as layers and channels. If 
you re editing an image file, its 
sensible to save it as a .psd, in 
order for the changes you've made 
to remain editable when you next 
open it. 


Spot colour 

A method of specifying and 
printing colours in which each 
colour is printed with its own 
separate ink, In contrast, process 
colour printing uses 

four inks (cyan, magenta, 
yellow and black) to produce 

all other colours. 


Tool options bar 

When a tool is selected, the 
corresponding tool options bar 
automatically appears along 

the top of the Photoshop window, 
giving you access to various 
options relating specifically to 
that tool. These often include 
effects such as Anti-aliasing and 
Feathering. 
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andbooks 


Improve your knowledge of the subjects that matter with our 
comprehensive collections of tutorials, projects and features 


THE COMPLETE 


PHOTOSHOP (ieceeanenren 


a ee HANDOOK Use Photoshop for 3D and vector art 

@ Secrets from professional digital artists 

‘ Make Photoshop work collaboratively 

Create stunning works of art using advanced tools 


Adobe Photoshop CS 2 trial for Mac & PC 
Adobe Illustrator CS 2 trial for Mac & PC 
@ Full programs, tutorial files, video lessons & more! 


Make movies, websites and music 
Protect your PC against online threats 
@ Breathe new life into your old machine 
Easy fixes for all your PC problems 


‘@ Stay safe online: ditch Internet Explorer for 
Mozilla Firefox 

 DiscSpace Explorer manages your hard dive 
~ worth £11.50" 

@ Banish malware & intruders with Ad Aware 
and Zone Alarm 

 Spring-clean your system using Fast Cleaner 
~worth £11.50" 

‘ 38 other full tweaking tools & utilities plus lots more! fishy THE CD-ROM 


@ The compli In of AceBackup 2004 


component 
ur digital memo! 1 experience 


right upgrades and modifications for your PC 


Each issue gives you unbeatable 
coverage of its subject plus some 
feature a FREE CD-ROM or DVD-ROM 


SIMPLE : 
SERIES ESeuieyenasadd WHSmith 


4 4 me 4 SUBJECT TO AVAILABILITY FROM SELECTED WH SMITH HIGH STREET STORES 


Index 


Index 


Turn straight to the information you need 
with the help of our comprehensive index 


A 


ACtONS .ivisesitenerven 36, 37, 43, 44, 45, 46, 47 
Animation palette,........ 14-17, 20, 24, 27, 28, 
30, 31, 34, 40, 58, 65, 72, 79, 87, 90, 96, 108, 119 


Aniglesetting.sx..csesevesvvecasesane 41, 64,97 
AUGK iss ve 21004 evesnncvaccceiaduncsdeeneene 42 
APMatUres 0. :creccee ee eenescerenerseenes 80 


Bevel and Emboss. 


Blending modes. . . .38, 40, 92, 97, 104, 106, 116 


Blutisaoorsadtes era detentiee 92,97, 101, 102, 105 
Bouncing ball project.................. 20-35 
BYOWSED, curusncessesrcese 18, 33, 34, 35, 79, 112 
Brushes). sass icantisi vanced 22, 68, 76, 104, 105 
C 

CCTV ie eats eoanedie hana sinise 110, 111,117,119 
Cells . ++ 16,19, 23 


Clone Stamp Tool ...... . 10,77, 86 
COCK ric suethavsresveecionpsabcecneaasren 18,19 
Clouds filter ........ 50, 63, 93, 95, 105, 109, 118 
COlOUPStODSisv Siete sce 2 ess aees cwonvsnened? 52 
COMOLIZE:,., coevetenprsasasoendnaeinensans 95, 105 
Gonstralitiats fetenisaverivesrantrecss anes 23 
Constraints.........0.-.cereeeeeeeeeeenes 19, 37 
Cropping ,............5+ vee 18,34, 35, 73, 82 


Custom Shape Tool. . . 37, 50, 51, 56,65, 70, 114 


D 


Dancing dog project ................0.08e0 5 76 


Deforming. 


Digital cameras... . 


Direct Select Tool. 
Displacement maps... 37, 52,53 
DISSOUVG . .2..scieseatensdvarvesses 86, 88, 90, 96 


15, 18, 53, 73, 81, 83, 87, 119 
36,111,112 


Duration. .. 
DVD .. 


E 


Eetards as cssvsinannsicene 
ECG animation ... 


Equalize adjustment.......................97 


Erasef TOOl. 0.5 ccesceveevenceeaevine -93,95 
FIN. cscrenecsscersansssesuseeeseeeescrdesle 18 
Filters. 0.002... 50, 55, 63, 68, 81, 91, 104, 117 
Flag animation ++-37,50, 51,52 
FlaSAi oui scgens snes vanes eeentadesiinwy .20 


FOCUS 35 sede cad decscervanecsaeeDOR 
Frames... 12, 15, 16, 18, 19, 20, 25, 27, 30, 31,40 


Free Transform Tool ... 1523 
Forward Warp Tool............-.00.0s0e000e 85 
Full Screen Mode. . 34,62, 106 
Function keys .. . +45, 62 
G 
GIFs......... 12, 13, 18, 20, 25, 30, 33, 51, 54, 69, 
sseuue 72,99, 100 
Gillham, Terry... ecvseicecccncerecensesseees 74 
Gradient Tool........... -20, 22, 40, 52, 64, 66 
Graln filter. .......00..0000-200ceecereeenees 63 
Grouping layers .............--. 23, 31,77, 118 
GUO. onc cks cesar eisazasies ter 48, 62, 63,112 


H 


Harryhausen, Ray ..............00005 74, 80, 84 
Heat haze effect. 


HIGH GHES 0. tinsencrmssntieravsresapg xexie 95 
Histograms... ..,.s<icsesevedeweraaaeneans 10, 
HIME oe nsseeirewsscrceis 35, 100, 104, 120 
Hue/Saturation, .............. 63, 104, 105, 118 
ICONS 5. sserescenveseasidensans aanvedsnen 14, 64 
INCIEMENTS |i. ouicnncevesceeceoenerenene 16, 80 
Interactivity .. 98, 111,115, 120 
Interface... 68,112 
AVG SS ca sedhei de secetneendnntaeannerrtbenee 95 
MAS irate weve toinen badass deesinsae ners 80, 82 
YREG Ys os sas ctunvetssicarsbnoinkiacievetasrernee 18, 
Key frames sii. cscacavacissmieueressy 24, 30 


51,54, 119 
Layers 13, 14, 16, 17, 22, 27, 28, 29, 31, 38, 40, 44, 


saepeeaeerceunsuaeventenensys's 47,70, 87, 92, 103 
Layer masks ........-....66.:00e0see 63, 94,95 
Layer styles. . 19, 36, 37, 39, 41, 42, 46, 102, 112, 
sxebsa seamen resanboneaseaeuennsnsedtoovsnsure 114 
LasSO TOON... icecesseesanscvesitenw 66,77, 107 
Levels command...................054 94, 107 
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Index 


[UOC Ce) BS, ECO cee ee ee 70 Patterns ......................42, 101, 110, 112 SPUN ae wo eran Jaay sepinireh ae nae 44 
LANKS Hiss ta toca nk 1s asia sgiettashiteievs cave 104 Rerspectivel.7.crosn-sefaccrs see eens 93 Statler oanestg etek ante 16, 36, 66, 67 
Lighting atc Nscccisecsttvacquavdnsss 92,95 Physics: trosecasnworicue Aes acct gtace 20, 26, 30 StOp-NOHIONG, 3 steele ay sess sunsaaworirs 81,82 
Wleuify filters c5% cis cccesonyeerces 84,85, 86 Pies ccc spe veeatactesiessarsctack 37,49, 51 
Logosse: «47 10, 19, 36, 38, 39, 40, 46, 49, 50, 56 Playback. .:.-...---,.-02s<- 15, 17, 18, 24, 25,46 
Looping ........ 12, 14, 20, 24, 25, 30, 33, 65, 87, 56, 57 
seek oulebn oA emasae an arowaese cece heen 91,96, 119 Preview ......18, 25, 26, 33, 69, 71, 83, 106, 116 Lf 
Presets. . TatQetesc. ct. dacs eisd -aieGaen ahe 115 
Textiz.s.. 13, 17, 39, 42, 45, 102, 106, 109, 118 
Q PRU NN Soca anton cpap saves eres 15 
Quick Mask mode... 2.0... eee. 76 SDP, piacvzescdnoes 20, 21, 38, 39, 45, 57, 113, 114 
Transform tools ...20, 22, 28, 29, 65, 78, 79, 107 
R TOOIDOX).<sazexszapeas 13, 14, 17, 51, 57, 70, 87 
Matchstick figure .............0.0.0000000.. 12 Radar animation ................... 16, 60-65 Transparent .......... 16 


MAYO rest nctecnan cee cee eats cde eae 20 Radio waves...................... 54, 56, 57,58 Tripod .. 
Matallic effects; .:08 -2e.2s0- nse 38, 39 Rain animation....... TuimerJOSephi: i...2-./se: xis. wiantvedovats 88 
Mildtones i225. conseascsspraxinsgeetesae 10, Wrsettienats 36, 48, 49, 54, 68, 85, 90, 96, 97, 111 
Tweening....... 15, 19, 20, 24, 38, 40, 41, 43, 46, 

Movement..... 12, 14, 16 , 20, 26, 40, 66, 83, 119 R@SOMION 5g osspee dacs scpsananiavs dies Q2AOSR och acest cease as, 47, 66, 67, 72, 87,91, 96 
Move Tool . + «17,40, 67, 71, 72, 77, 78,79 Reverse :2.:6 43 Ase -18, 58, 79, 81, 83, 103 

ROVETE Sissi isco etues spate 27 U 
N RED scat <ssaSvpieresepeaseactess05 91,107 UMN a oo oie tes etch bicemn ican pasig’ 93 
NeOmSIQn oesessca¥es sano ehentaesccus 45,46, Rollovers ... 10, 99, 101, 102, 103, 104, 108, 109, 
INOISG i stennapiewschendescengarsnkbece’ SAUIS stoped heievag ks deo aes, 111,115,116 Vv 
INUMIENCernctc ca anteater 55, 58, 60,64, 65 Rotating. 55 csii ses asiscvetetearee 16, 60,65 Visibility ..14, 16, 17, 19, 27,28, 29, 30, 31, 32, 55, 
ING SChreeirer anise eeniesiia np oeere tate 48 65, 70,71, 78,97 
Oo VOCtOF'. scccentansee 12, 13, 18, 56, 57, 61, 70, 102 
Opacity ss2is.c208. <8 14, 19, 39, 58, 97, 107, 120 


Optimising ... 18, 20, 33, 34, 35, 73, 87, 103, 120 


Options bar... 28, 40, 50, 52, 57, 105, 107 
Overview .. 

Overlay mode........ 38, 40, 62, 94, 96, 97, 116 
P 

Paint Bucket Tool. ..............0.00..2..002 62 
BAL PSHE ss aaiins edie wichd du ae 48, 50,51, 111 
Palettes: 55 nice 0c tacklssceys swsweiwases 14,77 
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Photos 


Alook inside 
ANIMATION TOOLS AND 
INTERFACES 


The powerful combination of Adobe 
Photoshop and ImageReady enables you 
to create eye-catching animations that will 
enhance your websites and add polish to 
your video 


The basics 
GETTING THE BALL 
BOUNCING PROPERLY 


Following this traditional “bouncing ball” 
animation exercise will help you to 
understand the process of creating assets 
in Photoshop and then making them move 
in ImageRready. 


Honing your skills 
CREATING LOGOS FORTV 
AND THE WEB 


Develop your animation skills by creating 
logos that you can use to augment your 
websites - you'll discover some powerful 
new tools and techniques in the process 


FOCUSGUIDE 34 
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Future 


MEDIA WITH PASSION [IS 


ll 


396004 


Everday tools 
ANIMATING EVERYDAY 
TECHNOLOGY 


Develop your Photoshop and ImageReady 
skills further to create a variety of 
technologically inspired animations for 
your home movies, your website and even 
for mobile phones 


The fun stuff 
FROM DOGS TO DALEKS: 
MAKING FIGURES MOVE 


Animators have been making characters 
move since the earliest days of the art. We'll 
show you how to use the ultra-modern 
tools of Photoshop and ImageReady to 
bring figures to life 


£7.99 
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Natural energy 


WHIPPING UP A STORMIN 
IMAGEREADY 


We can use Photoshop and ImageReady to 
create eye-catching animations that mimic 
dramatic natural phenomena such as rain, 

lightning and even a shimmering heat haze 


Basic interaction 
ANIMATION AND 
INTERACTIVITY 


Learn how to use animated .GIFs to make a 
website more interactive by incorporating 

them into the overall design of a page. You 
can then trigger animations to encourage 

surfers to explore your website 


And finally 
THE FINAL PROJECT 


Combine the various tips, tricks and 
techniques you have practised to create 
and animate a sophisticated homepage 
interface. You'll pull together your 
understanding of tweening and animated 
rollovers to achieve a hi-tech result 


